本文实例讲述了JS + CSS3实现的简易钟表效果。分享给大家供大家参考,具体如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> www.jb51.net js + css3简易钟表& lt;/title>
& lt;风格类型=" text/css "比;
* {
保证金:0;
填充:0;
}
#包装{
宽度:300 px;
身高:300 px;
background - color: aliceblue;
保证金:200 px的汽车;
位置:相对;
box-sizing: border-box;
}
#包装比;div {
位置:绝对的;
上图:50%;
左:50%;
}
{#小时
宽度:6 px;
高度:60 px;
background - color: # 000000;
保证金:-60 px 3 px;
transform-origin: 3 px 60 px;
}
#分钟{
宽度:4 px;
身高:80 px;
background - color: # 000000;
保证金:-80 px 2 px;
transform-origin: 2 px 80 px;
}
#秒{
宽:2 px;
身高:100 px;
背景颜色:红色;
保证金:-100 px 1 px;
transform-origin: 1 px 100 px;
}
{#点
宽度:20 px;
高度:20 px;
background - color:原木色;
保证金:-10 px -10 px;
这个特性:50%;
}
#{圈
宽度:300 px;
身高:300 px;
位置:相对;
}
#李圆{
list-style:没有;
宽:2 px;
身高:6 px;
background - color: # 000000;
位置:绝对的;
transform-origin: 1 px 150 px;
左:149 px;
上图:0 px;
}
& lt;/style>
& lt;/head>
& lt; body>
祝辞& lt; div id=" wrap ";
& lt; div id="小时"祝辞& lt;/div>
& lt; div id="分钟"祝辞& lt;/div>
& lt; div id="秒"祝辞& lt;/div>
& lt; div id="点"祝辞& lt;/div>
& lt; ul id="圆"祝辞& lt;/ul>
& lt;/div>
& lt;/body>
& lt;脚本type=" text/javascript祝辞
var hourDom=. getelementbyid(小时);
var minDom=. getelementbyid(分钟);
var secDom=. getelementbyid(“交会”);
var cricle=. getelementbyid(“圆”);//创建表盘、ul宽高为包装宽高,以包装中心点为变换基点,动态分配6°的李
我(var=0; i<60;我+ +){
李var=document.createElement(‘李’);
cricle.appendChild(李);
li.style.transform='旋转(“我+ * 6 +”度)”;
}//延时函数,确保每一秒更新一次最新时间。并且计算时间准确值。
setInterval(函数(){
var=new日期();
乏时=date.getHours ();
var min=date.getMinutes ();
var秒=date.getSeconds ();
分+=秒/60;
小时+=60分钟/;//当前时间*每个单位时间走的角度=指针指向
hourDom.style.transform='旋转(+小时* 30 +的度)”;
minDom.style.transform='旋转(' +分钟* 6 +度)”;
secDom.style.transform='旋转(' +秒* 6 +度)”;
}, 1000)
& lt;/script>
& lt;/html>
之前
运行效果:
感兴趣的朋友可使用:http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。
http://tools.jb51.net/jisuanqi/date_jisuanqi
http://tools.jb51.net/jisuanqi/datecalc
http://tools.jb51.net/jisuanqi/onlinedatejsq
http://tools.jb51.net/code/unixtime
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript时间与日期操作技巧总结》,《JavaScript查找算法技巧总结》,《JavaScript错误与调试技巧总结》,《JavaScript数据结构与算法技巧总结》,《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
