罗盘时钟源代码

VA细胞

已于 2023-12-03 16:18:26 修改

阅读量695

点赞数 8

文章标签： html5 html

于 2023-11-30 19:08:25 首次发布

本文链接：https://blog.csdn.net/hzxhxyj1/article/details/134719547

版权

昨天朋友发我一个罗盘时钟代码，让我修改。现在呈现源代码：

免费下载：https://download.csdn.net/download/hzxhxyj1/88584401?spm=1001.2014.3001.5501

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>罗盘时钟</title>
        <style>
            body{
                background-color: #333;
            }
            #clock {
                margin-top: 300px;
            }
            .label{
                display:inline-block;
                text-align: center;
                font-size:10px;
                transition:left 1s,top 1s;
                transform-origin: 0 0;
                width: 50px;
            }
            .out{
                width: 100px;
                height: 400px;
                line-height: 100px;
                background-color: #333;
                color: transparent;
                font-size: 100px;
                position: absolute;
                top: 50%;
                transform: translate(-10%,-50%);
            }
        </style>
    </head>
    <body>
        <div id="clock"></div>
        <div class="out">
          当前时间
        </div>
    </body>
    <script>
        let weekText = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
        let monthText = [];
        for(let i=0;i<12;i++){
            if(i<9){
                let j=i+1
                monthText[i]='0'+j+'月';
            }else{
                monthText[i]=i+1+'月';
            }
        }
        let dayText = [];
        for(let i=0;i<31;i++){
            if(i<9){
                let j=i+1
                dayText[i]='0'+j+'号';
            }else{
                dayText[i]=i+1+'号';
            }
        }
        let hourText = [];
        for(let i=0;i<24;i++){
            if(i<10){
                hourText[i]='0'+i+'点';
            }else{
                hourText[i]=i+'点';
            }
        }
        let minuteText = [];
        for(let i=0;i<60;i++){
            if(i<10){
                minuteText[i]='0'+i+'分';
            }else{
                minuteText[i]=i+'分';
            }
        }
        let secondText = [];
        for(let i=0;i<60;i++){
            if(i<9){
                let j=i+1
                secondText[i]='0'+j+'s';
            }else{
                secondText[i]=i+1+'s';
            }
        }
        let monthList = [];
        let dayList = [];
        let weekList = [];
        let hourList = [];
        let minuteList = [];
        let secondList = [];
        let timeTextSet = [
            [monthText, monthList],
            [dayText, dayList],
            [weekText, weekList],
            [hourText, hourList],
            [minuteText, minuteList],
            [secondText, secondList]
        ];
        let isRotating = false;
        let clock;
        window.onload = function () {
            init();
            setInterval(function () {
                runTime();
            }, 100);
            locateCurrent();
            setTimeout(function () {
                toRotate();
            }, 100);
        }
        function init() {
            clock = document.getElementById('clock');
            for (let i = 0; i < timeTextSet.length; i++) {
                for (let j = 0; j < timeTextSet[i][0].length; j++) {
                    let temp = createLabel(timeTextSet[i][0][j]);
                    clock.appendChild(temp);
                    timeTextSet[i][1].push(temp);
                }
            }
        }
        function createLabel(text) {
            let div = document.createElement('div');
            div.classList.add('label');
            div.innerText = text;
            return div;
        }

        function runTime() 
	{
            let now = new Date();
            let month = now.getMonth();
            let day = now.getDate();
            let week = now.getDay();
            let hour = now.getHours();
            let minute = now.getMinutes();
            let seconds = now.getSeconds();
            initStyle();
            let nowValue = [month, day - 1, week, hour, minute, seconds];
            for (let i = 0; i < nowValue.length; i++) {
                let num = nowValue[i];
                timeTextSet[i][1][num].style.color = 'red';
                timeTextSet[i][1][num].style.width = '65px';
                timeTextSet[i][1][num].style.borderBottom = '1px solid red';
            }
            if (isRotating) 
	    {
                let widthMid = document.body.clientWidth /1.6
                let heightMid = document.body.clientHeight/1.6
                for (let i = 0; i < timeTextSet.length; i++) {
                    for (let j = 0; j < timeTextSet[i][0].length; j++) {
                        let r = (i + 1) * 35 + 30 * i;
                        let deg = 360 / timeTextSet[i][1].length * (j - nowValue[i]) ;
                        let x = r * Math.sin(deg * Math.PI / 180) + widthMid;
                        let y = heightMid - r*Math.cos(deg * Math.PI / 180);
                        let temp =  timeTextSet[i][1][j];
                        temp.style.transform = 'rotate(' + (-90 + deg ) + 'deg)';
                        temp.style.left = x + 'px';
                        temp.style.top = y + 'px';
                    }
                }
            }
        }
        function initStyle() {
            let label = document.getElementsByClassName('label');
            for (let i = 0; i < label.length; i++) {
                label[i].style.color = '#eee';
                label[i].style.borderBottom = 'none';
                label[i].style.width = '30px';
                label[i].style.background = 'none';
            }
        }

        function locateCurrent() {
            for (let i = 0; i < timeTextSet.length; i++) {
                for (let j = 0; j < timeTextSet[i][1].length; j++) {
                    let tempX = timeTextSet[i][1][j].offsetLeft + "px";
                    let tempY = timeTextSet[i][1][j].offsetTop + "px";
                    setTimeout(function () {
                        timeTextSet[i][1][j].style.position = "absolute";
                        timeTextSet[i][1][j].style.left = tempX;
                        timeTextSet[i][1][j].style.top = tempY;
                    }, 50);
                }
            }
        }

        function toRotate() {
            isRotating = true;
            clock.style.transform = "rotate(90deg)";
        }
        var out=document.querySelector('.out')
        out.onclick=function(){
            window.open('vitaminMain.html');
        }
    </script>
</html>