启用javascript(苹果浏览器怎么启用javascript)

前沿拓展：

启用javascript

1、IE浏览器开启JavaScript方法：

在IE界面菜单栏中“工具”中选择“Internet选项”–“安全”选项卡–选择“Internet”（蓝色的小地球）–“自定义级别”–找到“脚本”下的“Java小程序脚本”中进项”，在打开的设置界面中选择“智能屏蔽”，在智能屏蔽设置页面中将“禁止运行Java程序”内客这色阳足状不晶取消，点击保存，重新启动浏览器设置即可生效。

1.less* {
margin: 0;
padding: 0;
&:hover #wrap {
background: skyblue;
color: beige;
}
#wrap {
//absolute: 元素从块级元素-》转化为**元素，可以自定义高宽（一旦浮动，则为浮动元素）
position: absolute;
width: 500px;
height: 500px;
background: salmon;
border: 1px solid;
border-radius: 50%;
//居中
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/**
这里的-50% =》 margin-left: -250px margin-top: -250px
*/
transition: 2s;
//阴影:box-shadow:x-px , y-px ,模糊程度？px #color
box-shadow: 2px 2px 5px #4682B4;
//卡尺
ul {
//消默认li样式
list-style: none;
li {
position: absolute;
width: 6px;
height: 30px;
background: beige;
//总宽度=500px，width=6px,left=247
left: 247px;
top: 0;
//更新基点
transform-origin: center 250px;
//分钟height:每5帧+1，5n+1，原生css变量n
&:nth-child(5n+1) {
height: 40px;
}
}
}
//rgb(255,255,255) 透明opacity–》rgba(255,255,255,0)
.logo {
position: absolute;
width: 500px;
height: 500px;
font: 50px/500px "微软雅黑";
text-align: center;
top: 15%;
}
//时针
.hour {
position: absolute;
//位置left=500-10=490/2=245
left: 245px;
//关联height=(500-100)/2=200
top: 90px;
width: 10px;
height: 160px;
background: steelblue;
border: 1px solid white;
transform-origin: center bottom;
}
//分针
.minute {
position: absolute;
//位置left=(500-8)/2=246
left: 246px;
//关联height=(500-200)/2=150
top: 70px;
width: 8px;
height: 180px;
background: yellowgreen;
border: 1px solid white;
transform-origin: center bottom;
}
//秒针
.second {
position: absolute;
//位置left=(500-6)/2=247
left: 247px;
//关联height=(500-200)/2=150
top: 80px;
width: 6px;
height: 200px;
background: red;
border: 1px solid;
box-shadow: 1px 1px 5px #000000;
//transform-origin: center bottom;
//height距离圆心30px，需要减去
transform-origin: center 170px;
}
//钟座
.center-top {
position: absolute;
//位置left=(500-50)/2=225
left: 225px;
//关联height=(500-50)/2=225
top: 225px;
width: 50px;
height: 50px;
border-radius: 50%;
background: salmon;
//降级div
z-index: -1;
}
.center-top2 {
position: absolute;
//位置：(500-30-2*2)/2=233
left: 233px;
top: 233px;
width: 30px;
height: 30px;
border: 2px solid white;
border-radius: 50%;
background: beige;
}
}
}
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221232.css* {
margin: 0;
padding: 0;
}
*:hover #wrap {
background: skyblue;
color: beige;
}
* #wrap {
position: absolute;
width: 500px;
height: 500px;
background: salmon;
border: 1px solid;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/**
这里的-50% =》 margin-left: -250px margin-top: -250px
*/
transition: 2s;
box-shadow: 2px 2px 5px #4682B4;
}
* #wrap ul {
list-style: none;
}
* #wrap ul li {
position: absolute;
width: 6px;
height: 30px;
background: beige;
left: 247px;
top: 0;
transform-origin: center 250px;
}
* #wrap ul li:nth-child(5n+1) {
height: 40px;
}
* #wrap .logo {
position: absolute;
width: 500px;
height: 500px;
font: 50px/500px "微软雅黑";
text-align: center;
top: 15%;
}
* #wrap .hour {
position: absolute;
left: 245px;
top: 90px;
width: 10px;
height: 160px;
background: steelblue;
border: 1px solid white;
transform-origin: center bottom;
}
* #wrap .minute {
position: absolute;
left: 246px;
top: 70px;
width: 8px;
height: 180px;
background: yellowgreen;
border: 1px solid white;
transform-origin: center bottom;
}
* #wrap .second {
position: absolute;
left: 247px;
top: 80px;
width: 6px;
height: 200px;
background: red;
border: 1px solid;
box-shadow: 1px 1px 5px #000000;
transform-origin: center 170px;
}
* #wrap .center-top {
position: absolute;
left: 225px;
top: 225px;
width: 50px;
height: 50px;
border-radius: 50%;
background: salmon;
z-index: -1;
}
* #wrap .center-top2 {
position: absolute;
left: 233px;
top: 233px;
width: 30px;
height: 30px;
border: 2px solid white;
border-radius: 50%;
background: beige;
}3.jswindow.onload=function(){
var ulNode=document.querySelector("#wrap > ul");
var liNode="";
//创建元素-style样式css
var liStyleNode=document.createElement("style");
var liCss="";
/**
* 循环添加li标签
* ul > li :nth-child(i+1){
* transform: rotate((i*6)deg);
* }
*/
for(var i=0;i<60;i++){
liNode+="<li></li>";
//指定li标签样式css
liCss+="ul > li:nth-child("
+(i+1)
+"){transform:rotate("+(i*6)+"deg);}";
}
ulNode.innerHTML=liNode;
liStyleNode.innerHTML+=liCss;
//加入到document
document.head.appendChild(liStyleNode);

var hourNode=document.querySelector("#wrap > .hour");
var minuteNode=document.querySelector("#wrap > .minute");
var secondNode=document.querySelector("#wrap > .second");

//计时器启动前，move执行时间变换
move();
//second-转动
setInterval(move,1000);
function move(){
//获取内置date
var date=new Date();
//注意时间计算顺序，优先计算秒
var second=date.getSeconds();
var minute=date.getMinutes()+second/60;
var hour=date.getHours()+minute/60;

//秒：360/60=6
secondNode.style.transform="rotate("+(6*second)+"deg)";
//分钟：360/60=6
minuteNode.style.transform="rotate("+(6*minute)+"deg)";
//小时：360/12=30
hourNode.style.transform="rotate("+(30*hour)+"deg)";
}
}
4.html<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>时钟表clock</title>
</head>

<body>
<div id="wrap">
<div class="logo">cevent</div>
<ul>
<!–启用js脚本–>
<!–<li></li>–>
</ul>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="center-top"></div>
<div class="center-top2"></div>
</div>

</body>
<link rel="stylesheet" href="css/less025-clock-module.css" />
<script type="text/javascript" src="js/less025-clock-module.js"></script>

</html>
1234567891011121314151617181920212223242526275.效果图