这两天在家闲来无事,赶巧看到了Js的Date,就做了个钟表这个经典案例。
废话不说看效果截图:
这里就是用表盘图片背景,外加CSS制作的指针,都懂哈,这里不再赘述。
代码如下:
window.onload = function (){
clocks = setInterval(function () {
var hours = $('.hour')[0];
var min = $('.minutes')[0];
var sen = $('.seconds')[0];
var time = new Date();
//求出总毫秒数 精准获得时间
var mills = time.getMilliseconds();
var S = time.getSeconds() + mills / 1000;
var M = time.getMinutes() + S / 60;
var H = time.getHours() % 12 + M / 60;
//设置样式
hours.style.transform ='rotate('+ (H * 30 +180) +'deg)' ;
min.style.transform ='rotate('+ (M * 6 + 180) +'deg)';
sen.style.transform ='rotate('+ (S * 6 + 180) + 'deg)';
},10);
}
首先先获取表的指针,然后通过new Date()获取当前时间,通过getSeconds()、getMinutes()、getHours()方法分别获得秒、分钟、小时。为了更加的平滑,再将毫秒在后面加上。最后 (H * 30 +180):在求得小时后,一个小时就是30°,因为我自己的布局问题,所以我再加了180(非必要),分钟秒类似,一秒是6°,通过style设置旋转样式完成制作。
setInterval() 方法的timeout属性这里可以设置成1000(秒),10(ms)为了平滑,我这里用的是10。
将时间戳修改成时间格式一行代码解决
function getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
}
parseInt() 函数可解析一个字符串,并返回一个整数。js中时间操作单位是毫秒。
toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串,并返回结果。
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
replace(/:\d{1,2}$/,’ ')验证替换以:开始有一位或二位数字的结束字符串,就是秒;替换为空。