欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

用原生JS写简单的时钟

程序员文章站 2022-06-09 20:07:02
...

这是一个简单的时钟方案,主要代码是三个时针旋转的思路,时钟布局省去。

step 1. 获取时分秒转针

      var hour = document.getElementById('hour');
      var min = document.getElementById('m');
      var sec = document.getElementById('s');

step 2. 声明四个变量并给他们赋值,初始值为零是为了便于时针角度的运算

     var s = 0,m = 0,h = 0,ms = 0;

step 3. 分别获取当地时、分、秒,利用定时器函数使时针的旋转随着时间而变化

setInterval(){
        var date = new Date(); 
        MS = date.getMilliseconds; 
        S = date.getSeconds()
        M = date.getMinutes() 
        H = date.getHours()%12
        sec.style.webkitTransform =“rotate(”+ s * 6 +“deg)”;
        min.style.webkitTransform =“rotate(”+ m * 6 +“deg)”;
        hour.style.webkitTransform =“rotate(”+ h * 30 +“deg)”;
},1000;

以上便是一个简单原生JS写时钟,附上个人GIT链接
https://github.com/gameplayer97

相关标签: ÿ原生JS