课程咨询 :186 8716 1620      qq:2066486918

昆明Java培训 > 达内新闻 > JS时钟代码分享(下)
  • JS时钟代码分享(下)

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

  • 这是用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时钟代码分享(中)

下一篇:不要在下雨天修屋顶

最新开班日期  |  更多

Java--零基础全日制班

Java--零基础全日制班

开班日期:11/30

Java--零基础业余班

Java--零基础业余班

开班日期:11/30

Java--周末提升班

Java--周末提升班

开班日期:11/30

Java--零基础周末班

Java--零基础周末班

开班日期:11/30

  • 网址:http://km .java.tedu.cn      地址:昆明市官渡区春城路62号证券大厦附楼6楼
  • 课程培训电话:186 8716 1620      qq:2066486918    全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56