用原生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