这就是我说的浅易的表盘，有点大略了 QaQ
刚进修的时钟动画，以为另有许多东西要去进修，有时刻发明代码真是很奇异的。
起首呢 我们须要有一个圆的表面，这个就是定义一个div宽和高雷同，然后用到了一个css3的属性 border-radius：50% 50% 固然只如果大于即是50%都是能够成圆的。
表面做出来后我们须要插进去60个表盘上的刻度。这个时刻有两种方法
1.能够用dom举行插进去
var oDial=document.getElementById("dial");
for(var i=0;i<60;i++) {
var oLi=document.createElement("li");
oDial.appendChild(oLi);
}
2.能够用html构造插进去
var Lis="";
for(var i=0;i<60;i++) {
Lis+="<li ></li>";
}
oDial.innerHTML=Lis;
表盘刻度插进去今后呢我们须要对这60个刻度举行定位写出扭转的原点然后每一个刻度都在上一个刻度的基础上多扭转6° 我们须要写出表针用三个div离别示意时针 分针 秒针而且这三个须要在一个点上举行扭转 那就是三个div的底部
然后我们应当晓得如今所处的时候是多少 这是我们须要用到js了。
建立一个Date的对象 而且用三个变量离别示意小时 分钟 秒并存放到一个函数中。
var now=new Date();
var hour=now.getHours();
var second=now.getSeconds();
var minute=now.getMinutes();
当获得时候今后 获得这三个dom对象
var oSecond=document.getElementById("second");
var oMinute=document.getElementById("minute");
var oHour=document.getElementById("hour"); 当获得这三个dom对象时须要举行迁移转变用到transform：rotate（度数）
oSecond.style.transform="rotate("+ second * 6+"deg)";
oMinute.style.transform="rotate("+ minute*6 +"deg)";
oHour.style.transform="rotate("+( hour*30+minute/60 *30 )+"deg)";末了封装好的函数run的代码以下：
function run() {
var now=new Date();
var hour=now.getHours();
var second=now.getSeconds();
var minute=now.getMinutes();
oSecond.style.transform="rotate("+ second * 6+"deg)";
oMinute.style.transform="rotate("+ minute*6 +"deg)";
oHour.style.transform="rotate("+( hour*30+minute/60 *30 )+"deg)";如许只能迁移转变一次 我们须要开一个定时器把run这个函数放进去
setInterval(run,1000); html代码：
<div id="clock">
<ul id="dial"></ul>
<div id="second"></div>
<div id="minute"></div>
<div id="hour"></div>
</div>css代码
* {
padding: 0;
margin: 0;
}
#clock {
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid ;
margin: 200px auto;
position: relative;
}
li {
list-style: none;
width: 2px;
height: 6px;
background: black;
position: absolute;
left: 100px;
top: 0;
transform-origin: 0 100px;
}
#dial li:nth-child(5n+1) {
height: 10px;
}
#clock div {
transform-origin: bottom;
}
#hour{
width: 4px;
height: 40px;
background: #000000;
position: absolute;
left: 98px;
top: 60px;
}
#minute{
width: 4px;
height: 60px;
background: #999;
position: absolute;
left: 98px;
top: 40px;
}
#second{
width: 2px;
height: 70px;
background: #ff0000;
position: absolute;
left: 99px;
top: 30px;
}悉数代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
#clock {
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid ;
margin: 200px auto;
position: relative;
}
li {
list-style: none;
width: 2px;
height: 6px;
background: black;
position: absolute;
left: 100px;
top: 0;
transform-origin: 0 100px;
}
#dial li:nth-child(5n+1) {
height: 10px;
}
#clock div {
transform-origin: bottom;
}
#hour{
width: 4px;
height: 40px;
background: #000000;
position: absolute;
left: 98px;
top: 60px;
}
#minute{
width: 4px;
height: 60px;
background: #999;
position: absolute;
left: 98px;
top: 40px;
}
#second{
width: 2px;
height: 70px;
background: #ff0000;
position: absolute;
left: 99px;
top: 30px;
}
</style>
</head>
<body>
<div id="clock">
<ul id="dial"></ul>
<div id="second"></div>
<div id="minute"></div>
<div id="hour"></div>
</div>
<script>
var oClock=document.getElementById("clock");
var oDial=document.getElementById("dial");
var oSecond=document.getElementById("second");
var oMinute=document.getElementById("minute");
var oHour=document.getElementById("hour");
var Lis="";
for(var i=0;i<60;i++) {
// var oLi=document.createElement("li");
// oDial.appendChild(oLi);
Lis+="<li style='transform: rotate("+ i * 6+"deg)'></li>";
}
oDial.innerHTML=Lis;
function run() {
var now=new Date();
var hour=now.getHours();
var second=now.getSeconds();
var minute=now.getMinutes();
oSecond.style.transform="rotate("+ second * 6+"deg)";
oMinute.style.transform="rotate("+ minute*6 +"deg)";
oHour.style.transform="rotate("+( hour*30+minute/60 *30 )+"deg)";
}
run();
setInterval(run,1000);
</script>
</body>
</html>写的不好 还望列位指出毛病 共同进步。
