用JavaScript实现简单网页时钟

利用JavaScript实现网页时钟，效果如下图所示：

首先在body中完成表盘、指针的资源载入：

设置CSS样式：

最后是JS代码部分，使用循环定时器setInterval()每秒调用一次主函数，主函数内使用new Date()创建时间对象，分别使用 .getHours()；.getMinutes()；.getSeconds()获得当前的时分秒，然后利用CSS自带动画-旋转改变指针的角度：

setInterval(watch,1000);
var anjleSeconds=0,anjleMin=0,anjleHours=0;
function watch() {
        var Time= new Date();
        anjleSeconds=Time.getSeconds()/60*360+90;
        anjleMin=Time.getMinutes()/60*360+90;
        anjleHours=nowHours/12*360+90;
        document.getElementById("second").style.transform="rotate("+anjleSeconds+"deg)";
        document.getElementById("min").style.transform="rotate("+anjleMin+"deg)";
        document.getElementById("hour").style.transform="rotate("+anjleHours+"deg)";
    }

目前存在的问题是，时分秒指针由于使用的是hr标签表示，所以存在两端一样长的问题。

完整代码如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。