注册 登录 充值会员 退出
网站、APP、小程序等定制开发,联系QQ 1206995177 毕业设计 java源码 PHP源码
充值

jQuery年月日星期数字日期时间跟指针一体时钟代码

作者/代码整理:  (源码已亲测,不会安装的可以向QQ1915635791要安装视频教程) 发布日期:2022-10-07
jQuery年月日星期数字日期时间跟指针一体时钟代码
一款带有年月日星期数字日期时间跟指针一体时钟jQuery代码。


js代码


<script>
$(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 += "<div class='clock-scale'> " + 
                   "<div class='scale-hidden'></div>" + 
                   "<div class='scale-show'></div>" + 
                  "</div>";
        }
        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);
    
    
});
</script>