昆明java培训
达内昆明广州春城路

18487146383

热门课程

JS时钟代码分享(下)

  • 时间:2016-07-30
  • 发布:昆明Java培训
  • 来源:SegmentFault

这是用JS实现时钟效果的第三部分代码,这部分代码需要注意最后数字指针旋转的位置和方向。在文章中达内Java培训的小编会给大家说明。一起来看看吧。

JavaScript:

var oNumber=document.getElementById("number");

var oDiv=oNumber.getElementsByTagName("div");

var oSpan=oNumber.getElementsByTagName("span");

for(var i=0;i<oDiv.length;i++){

oDiv[i].style.WebkitTransform="rotate(" + i * 30 + "deg)";

}   

for(var j=0;j<oSpan.length;j++){

oSpan[j].style.WebkitTransform="rotate("+ j * -30 + "deg)";

}   

function ColorNumber(){

var oHoure=document.getElementById("houre");

var oMinute=document.getElementById("minute");

var oSecond=document.getElementById("second");

var nowTime=new Date();

var nowHoure=nowTime.getHours();

var nowMinute=nowTime.getMinutes();

var nowSecond=nowTime.getSeconds();

var houreDeg=(nowMinute/60)*30;

var minuteDeg=(nowSecond/60)*6;

oHoure.style.WebkitTransform="rotate("+ (nowHoure * 30+houreDeg) + "deg)";

oMinute.style.WebkitTransform="rotate("+ (nowMinute * 6+ minuteDeg) + "deg)";

oSecond.style.WebkitTransform="rotate("+ (nowSecond * 6) + "deg)";

}

ColorNumber();

setInterval(ColorNumber,1000);

这里主要代码就两段,一段是布局用的,让数字旋转到相应的位置并调整方向:

for(var i=0;i<oDiv.length;i++){

oDiv[i].style.WebkitTransform="rotate(" + i * 30 + "deg)";

}   

for(var j=0;j<oSpan.length;j++){

oSpan[j].style.WebkitTransform="rotate("+ j * -30 + "deg)";

}

另一段是计算指针的角度,其中最重要的是在不满一小时或不满一分钟时,时针或分针应该转多少度:

var houreDeg=(nowMinute/60)*30;

var minuteDeg=(nowSecond/60)*6;

到这里用JS实现时钟效果的代码就全部结束了,你学会了吗?达内Java培训的老师认为,代码不要直接复制粘贴,要自己写一遍理解它,才能有举一反三的效果。那么,快和达内Java培训的小编一起练习这组代码吧。

上一篇:JS时钟代码分享(中)
下一篇:不要在下雨天修屋顶

Effective java的创建和销毁对象

昆明达内Java培训学费多少?

LinkedIn服务:三人行,必有我师【达内java培训】

Java培训:7月排行榜Go创新高Java稳第一

选择城市和中心
贵州省

广西省

海南省

台湾