JavaScript实现钟表及时间戳转换日期格式

这两天在家闲来无事,赶巧看到了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}$/,’ ')验证替换以:开始有一位或二位数字的结束字符串,就是秒;替换为空。

发布了12 篇原创文章 · 获赞 5 · 访问量 646

猜你喜欢

转载自blog.csdn.net/qq_44091773/article/details/104240564