时钟特效html北大青鸟,JS实现网页时钟特效

本文实例为大家分享了JS实现网页时钟特效的具体代码，供大家参考，具体内容如下

主要逻辑 根据JS 的Date属性 求得当前的 时 分 秒 之后,按照 360/(时|分|秒)  来对三个指针元素进行旋转

Title

#box {

width: 600px;

height: 600px;

/*border: 1px solid #000;*/

background: url("img/bg.png") no-repeat;

background-size: cover;

margin: 30px auto;

position: relative;

overflow: hidden;

}

#h{

width:100%;

height:100%;

background: url("img/h.png") no-repeat;

background-size: cover;

position: absolute;

}

#m{

width:100%;

height:100%;

background: url("img/m.png") no-repeat;

background-size: cover;

position: absolute;

}

#s{

width:100%;

height:100%;

background: url("img/s.png") no-repeat;

background-size: cover;

position: absolute;

}

window.onload = function(){

// 1:找到三个元素标签

var h = document.getElementById("h"); //时

var m = document.getElementById("m"); //分

var s = document.getElementById("s"); //秒

setInterval(function(){

var date = new Date();

var HH = (date.getHours()%12);

var MM = date.getMinutes();

var SS = date.getSeconds();

h.style.transform = "rotate("+(HH*30)+"deg)";

m.style.transform = "rotate("+(MM*6)+"deg)";

s.style.transform = "rotate("+(SS*6)+"deg)";

},1000)

}

更多JavaScript时钟特效点击查看：JavaScript时钟特效专题

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