html+css+js 动态时钟

          今天我在学习css3的时候,无意间在一个博客好友的文章里看见咯一个纯代码写出的动态时钟,我觉得很有确,我就试着按照他的思路分析自己写咯一个,

不过我写的和他写的还是有区别的,他的好些元素是用js创建的,而我的是直接在html代码里面添加的,练习的过程中,我把以前我不懂怎样使用原型平均分裂div学习到咯,代码如下:

 var radius = 180;//大圆半价
    var dot_num = 360/$(".dot").length;//每个div对应的弧度数
    //每一个dot对应的弧度;
    var ahd = dot_num*Math.PI/180;
    $(".dot").each(function(index, el) {
        $(this).css({
            "left":190+Math.sin((ahd*index))*radius,
            "top":190+Math.cos((ahd*index))*radius
        });
    });

实现的效果图如下:

html+css+js 动态时钟_第1张图片


看是不是均匀分配的呢?

html代码如下:

       
       
       
6
       
5
       
4
       
3
       
2
       
1
       
12
       
11
       
10
       
9
       
8
       
7
   
       
   
   
       
       
       
       
       
   

css代码:
body,div,p{ font-family: 'Microsoft Yahei' ;font-size: 14px;}
    .box{ width: 400px; height: 400px; border:10px solid #8bf2f1;margin:100px auto; border-radius: 50%;
        box-shadow: 0px 0px 20px 3px #444 inset; position: relative;}
    /*原点*/
    .origin{ width: 20px; height: 20px; border-radius: 50%; background: #ff0000; top:190px; left: 190px; position: absolute;}
    /* 指针 */
    .clock_line{ position: absolute;position:absolute;z-index:20;}
    .hour_line{width:100px;height:4px;top:198px;left:200px;background-color:#000;border-radius:2px;
        transform-origin:0 50%;box-shadow:1px -3px 8px 3px #aaa;}
    .minute_line{width:130px;height:2px;top:199px;left:190px;background-color:#000;
        transform-origin:7.692% 50%;box-shadow:1px -3px 8px 1px #aaa;}
    .second_line{width:170px;height:1px;top:199.5px;left:180px;background-color:#f60;
        transform-origin:11.765% 50%;box-shadow:1px -3px 7px 1px #bbb;}


    .dot_box{width: inherit; height: inherit;}
    /*时钟数*/
    .dot{ width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute;}
    .clock-scale{width:195px;height:2px;transform-origin:0% 50%;z-index:7;
      position:absolute;top:199px;left:200px;}
    .scale-show{ width:12px;height:2px;background-color:#555;float:left;}
    .scale-hidden{width:183px;height:2px;float:left;}
    /*日期*/
    .date_info{width:160px;height:28px; 
        line-height:28px;text-align:center;position:absolute;top:230px;left:120px;z-index:11;color:#555;
        font-weight:bold;}
    .time_info{ width: 110px; height: 35px; line-height: 35px;text-align:center;position:absolute;top:270px;left:150px;z-index:11;color:#555; background: #253e3e; }
    .time{ width: 35px ;height:35px; float: left; color: #fff; font-size: 22px;}
     #minute_time{border-left:1px solid #fff;border-right:1px solid #fff;}

js代码如下:

$(function(){
    var clock = document.getElementById("clock");
    function initNumXY(){
        // 1、12个数字的位置设置
        var radius = 160;//大圆半价
        var dot_num = 360/$(".dot").length;//每个div对应的弧度数
        //每一个dot对应的弧度;
        var ahd = dot_num*Math.PI/180;
        $(".dot").each(function(index, el) {
            $(this).css({
                "left":180+Math.sin((ahd*index))*radius,
                "top":180+Math.cos((ahd*index))*radius
            });
        });
        // 2、刻钟设置
        for(var i = 0; i < 60; i++) {
            clock.innerHTML += "
" +                     "
" +                     "
" +                    "
";         }         var scale = document.getElementsByClassName("clock-scale");             for(var i = 0; i < scale.length; i++) {                 scale[i].style.transform="rotate(" + (i * 6 - 90) + "deg)";         }     }     initNumXY();//调用上面的函数     //获取时钟id     var hour_line = document.getElementById("hour_line"),         minute_line = document.getElementById("minute_line"),         second_line = document.getElementById("second_line"),         date_info=document.getElementById("date_info"),//获取date_info         hour_time = document.getElementById("hour_time"),// 获去时间id         minute_time = document.getElementById("minute_time"),         second_time = document.getElementById("second_time");     //3、设置动态时间     function setTime(){         var nowdate = new Date();         //获取年月日时分秒         var year = nowdate.getFullYear(),             month = nowdate.getMonth()+1,             day = nowdate.getDay(),             hours = nowdate.getHours(),             minutes = nowdate.getMinutes(),             seconds = nowdate.getSeconds(),             date = nowdate.getDate();         var weekday =["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];         // 获取日期id         date_info.innerHTML=year+"年"+month+"月"+day+"日   "+weekday[day];         hour_time.innerHTML = hours >=10 ? hours : "0"+hours;         minute_time.innerHTML = minutes >=10 ? minutes : "0"+minutes;         second_time.innerHTML = seconds >=10 ? seconds : "0"+seconds;         console.log(year+"年"+month+"月"+day+"日   "+weekday[day]);         //时分秒针设置         var hour_rotate = (hours*30-90) + (Math.floor(minutes / 12) * 6);         hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)';         minute_line.style.transform = 'rotate(' + (minutes*6 - 90) + 'deg)';         second_line.style.transform = 'rotate(' + (seconds*6 - 90)+'deg)';     }     // setTime();     setInterval(setTime, 1000);           });
效果图:

html+css+js 动态时钟_第2张图片



请大家多多指点。



你可能感兴趣的:(html+css+js 动态时钟)