CSS3+js 简易时钟

最新推荐文章于 2024-06-24 23:43:02 发布

李嘉杰

最新推荐文章于 2024-06-24 23:43:02 发布

阅读量294

点赞数

分类专栏： Javascript原生写法

本文链接：https://blog.csdn.net/qq_39652441/article/details/77103407

版权

Javascript原生写法专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<div class="clock">
<div id="hour" class="common"></div>
<div id="minute" class="common"></div>
<div id="second" class="common"></div>
</div>
<script>
var hour=document.getElementById('hour');
var minute=document.getElementById('minute');
var second=document.getElementById('second');
function clock(){
var date =new Date();
var currents=date.getMilliseconds();
var s=date.getSeconds()+currents/1000;
var m=date.getMinutes()+s/60;
var h=date.getHours()%12+m/60;
//注意webkit
second.style.WebkitTransform = "rotate("+s*6+"deg)";
minute.style.WebkitTransform = "rotate("+m*6+"deg)";
hour.style.WebkitTransform = "rotate("+h*30+"deg)";
}
setInterval(clock,100);
</script>