前沿拓展：

啟用javascript

1、IE瀏覽器開啟JavaScript方法：

在IE界面菜單欄中“工具”中選擇“Internet選項(xiàng)”–“安全”選項(xiàng)卡–選擇“Internet”（藍(lán)色的小地球）–“自定義級(jí)別”–找到“腳本”下的“Java小程序腳本”中進(jìn)項(xiàng)”，在打開的設(shè)置界面中選擇“智能屏蔽”，在智能屏蔽設(shè)置頁(yè)面中將“禁止運(yùn)行Java程序”內(nèi)客這色陽(yáng)足狀不晶取消，點(diǎn)擊保存，重新啟動(dòng)瀏覽器設(shè)置即可生效。

1.less* {
margin: 0;
padding: 0;
&:hover #wrap {
background: skyblue;
color: beige;
}
#wrap {
//absolute: 元素從塊級(jí)元素-》轉(zhuǎn)化為**元素，可以自定義高寬（一旦浮動(dòng)，則為浮動(dòng)元素）
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 {
//消默認(rèn)li樣式
list-style: none;
li {
position: absolute;
width: 6px;
height: 30px;
background: beige;
//總寬度=500px，width=6px,left=247
left: 247px;
top: 0;
//更新基點(diǎn)
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%;
}
//時(shí)針
.hour {
position: absolute;
//位置left=500-10=490/2=245
left: 245px;
//關(guān)聯(lián)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;
//關(guān)聯(lián)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;
//關(guān)聯(lián)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;
//關(guān)聯(lián)height=(500-50)/2=225
top: 225px;
width: 50px;
height: 50px;
border-radius: 50%;
background: salmon;
//降級(jí)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="";
//創(chuàng)建元素-style樣式css
var liStyleNode=document.createElement("style");
var liCss="";
/**
* 循環(huán)添加li標(biāo)簽
* ul > li :nth-child(i+1){
* transform: rotate((i*6)deg);
* }
*/
for(var i=0;i<60;i++){
liNode+="<li></li>";
//指定li標(biāo)簽樣式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");

//計(jì)時(shí)器啟動(dòng)前，move執(zhí)行時(shí)間變換
move();
//second-轉(zhuǎn)動(dòng)
setInterval(move,1000);
function move(){
//獲取內(nèi)置date
var date=new Date();
//注意時(shí)間計(jì)算順序，優(yōu)先計(jì)算秒
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)";
//小時(shí)：360/12=30
hourNode.style.transform="rotate("+(30*hour)+"deg)";
}
}
4.html<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>時(shí)鐘表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.效果圖

拓展知識(shí)：