五步轻松实现JavaScript HTML时钟效果(2)
step4、时钟转动
通过setInterval设置定时器，每秒刷新一次。注意，需要初始化执行一次，否则会在1s后才能看到效果。
//初始化执行一次 clock(); setInterval(clock,1000);
step5、绘制数字时间
数字时间也是在一个圆周上，我们只用确定好半径，然后得到半径上的坐标。通过左边来定位每个数字就好了。看一下圆坐标系的计算规则：
* 圆半径坐标计算：
* x = pointX + r*cos(angle);
* y = pointY + r*sin(angle);
但是注意，我们计算的坐标是圆弧上点的坐标，当定位每个数字时，都是以元素的左上角点进行定位，这样我们的数字就会存在偏移。也就是说数字的中心点不在圆弧上，解决办法就是把坐标点(x,y)平移自身的一半(x-w/2, y-h/2)
，这样数字的中心点就在圆弧上了。
var pointX = 200;
var pointY = 200;
var r = 150;
function drawNumber(){
var deg = Math.PI*2/12;//360°
for (var i = 1; i <= 12; i++) {
//计算每格的角度
var angle = deg*i;
//计算圆上的坐标
var x = pointX + r*Math.cos(angle);
var y = pointY + r*Math.sin(angle);
//创建div,写入数字
var number = document.createElement('div');
number.className = 'number';
number.innerHTML = i;
//减去自身的一半, 让div的中心点在圆弧上
number.style.left = x - 25 + 'px';
number.style.top = y - 25 + 'px';
//添加到页面
myClock.appendChild(number);
}
}
完整JS代码：
<script>
/***
* 时钟:
* 1> 旋转: rotate(90deg)
* 2> 旋转中心点: transform-origin
* */
//TODO step1: 获取时钟的指针
var hour = document.getElementById('hour');//时针
var minute = document.getElementById('minute');//分针
var second = document.getElementById('second');//秒针
var myClock = document.getElementById('clock');//时钟
//TODO step2: 获取当前时间,把指针放在正确的位置
function clock(){
var date = new Date();//获取当前时间
//时(0-23) 分(0-59)秒(0-59)
//计算转动角度
var hourDeg = date.getHours()*360/12;
var minuteDeg = date.getMinutes()*360/60;
var secondDeg = date.getSeconds()*360/60;
//console.log(hourDeg, minuteDeg, secondDeg);
//设置指针
hour.style.transform = 'rotate('+hourDeg+'deg)';
minute.style.transform = 'rotate('+minuteDeg+'deg)';
second.style.transform = 'rotate('+secondDeg+'deg)';
}
//初始化执行一次
clock();
//TODO step3: 设置定时器
setInterval(clock,1000);
/***
* 圆半径坐标计算：
* x = pointX + r*cos(angle);
* y = pointY + r*sin(angle);
* */
var pointX = 200;
var pointY = 200;
var r = 150;
//TODO step4: 画时钟数字
function drawNumber(){
var deg = Math.PI*2/12;//360°
for (var i = 1; i <= 12; i++) {
//计算每格的角度
var angle = deg*i;
//计算圆上的坐标
var x = pointX + r*Math.cos(angle);
var y = pointY + r*Math.sin(angle);
//创建div,写入数字
var number = document.createElement('div');
number.className = 'number';
number.innerHTML = i;
//减去自身的一半, 让div的中心点在圆弧上
number.style.left = x - 25 + 'px';
number.style.top = y - 25 + 'px';
//添加到页面
myClock.appendChild(number);
}
}
drawNumber();
< /script>
内容版权声明：除非注明，否则皆为本站原创文章。