ジッタクロック全フロントエンドファイル、css html js、参照全網

自分でプロジェクトを建てて、プロジェクトの中のファイルはsrcディレクトリの下にあればいいので、この3つのファイルを下に置けばいいです.cssソース:

*{
    margin:0;
    padding:0;
    background:rgb(111, 245, 93);
}

html,body{
    width:100%;
    height:100%;
    overflow: hidden;
}
#clock {
    position: relative;
    width: 100%;
    height: 100%;
}
.label{
    display:inline-block;
    text-align: center;
    padding:5px 5px;
    font-size:20px;
    font-family:   ;
    transition:left 1s,top 1s;
    transform-origin: 0 0;
}

jsソース:

let monthText = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "   ", "   "];
let dayText = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "   ", "    "];
let weekText = ["   ", "   ", "   ", "   ", "   ", "   ", "   "];
let hourText = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "    ", "    ", "    "];
let minuteText = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ",
    "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ",
    "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "   ",
    "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "   ",
    "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "   ",
    "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "   "];
let secondText = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ",
    "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ",
    "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "   ",
    "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "   ",
    "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "   ",
    "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "    ", "   "];
//   dom     
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 = true;
//    
let clock;
window.onload = function () {
    init();
    //   100ms       
    setInterval(function () {
        runTime();
    }, 100);
    //            
    locateCurrent();
    // 3        
    setTimeout(function () {
        toRotate();
    }, 3000);
}

//      
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);
            //            list 
            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';
    }
    //       
    if (isRotating) {
        //       
        let widthMid = document.body.clientWidth / 2;
        let heightMid = document.body.clientHeight / 2;
        //     dom         
        for (let i = 0; i < timeTextSet.length; i++) {
            for (let j = 0; j < timeTextSet[i][0].length; j++) {
                //              x y   ，             
                let r = (i + 1) * 35 + 50 * i;
                //                     ,      
                let deg = 360 / timeTextSet[i][1].length * (j - nowValue[i]);
                //   dom     
                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 = 'black';
    }
}

function locateCurrent() {
    for (let i = 0; i < timeTextSet.length; i++) {
        for (let j = 0; j < timeTextSet[i][1].length; j++) {
            //             position   left top
            let tempX = timeTextSet[i][1][j].offsetLeft + "px";
            let tempY = timeTextSet[i][1][j].offsetTop + "px";
            // console.log(timeTextSet[i][1][j]);
            //   let     
            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)";
}

htmlソース:

"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    "X-UA-Compatible" content="ie=edge">
    
    "stylesheet" href="clock.css">
    "clock.js"</span>>


"clock">