js实现一个罗盘样的时钟

sailiss

于 2024-10-28 17:04:51 发布

阅读量298

点赞数 4

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/woshiyaozhenyang/article/details/143307306

版权

扇形打开成一个圆，后一直随时间更新。
选中展示
普通展示

<!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>
        * {margin: 0;padding: 0;}
        html,body {width: 100%;height: 100%;background-color: #000;overflow: hidden;}
        #clock {position: relative;width: 100%;height: 100%;background: black;}
        .label {position: absolute;top: 50%;left: 50%;display: inline-block;color: #4d4d4d;text-align: center;
		padding: 0 5px;font-size: 19px;transition: all 1s;transform: translate(-50%,-50%);transform-origin: 0% 0%;}
        .now {color: #fff;}
    </style>
</head>
<body><div id="clock"></div>
<script>
    var yearText=[''];var monthText=[];var dayText=[];var weekText=["星期日"];
    var hourText=[];var minuteText=[];var secondsText=[];
    for(var i=1;i<=12;i++){monthText.push(numberToChinese(i)+"月");}
    for(var i=1;i<=31;i++){dayText.push(numberToChinese(i)+"号");}
    for(var i=1;i<= 6;i++){weekText.push("星期"+numberToChinese(i));}
    for(var i=0;i<=23;i++){hourText.push(numberToChinese(i)+"点");}
    for(var i=0;i<=59;i++){minuteText.push(numberToChinese(i)+"分");}
    for(var i=1;i<=60;i++){secondsText.push(numberToChinese(i)+"秒");}
    console.log(monthText);console.log(dayText);console.log(weekText);
    console.log(hourText);console.log(minuteText);console.log(secondsText);
    var clock;var yearList=[];var monthList=[];var dayList=[];
    var weekList=[];var hourList=[];var minuteList=[];var secondsList=[];
    var textList=[[yearText,yearList],[monthText,monthList],[dayText,dayList],
        [weekText,weekList],[hourText,hourList],[minuteText,minuteList],[secondsText,secondsList],]
    window.onload=function(){init();
        setTimeout(function(){initTransition();},0);
        setTimeout(function(){var timeArr=[0,0,0,0,0,0,0];rotateTransition(timeArr);
            setInterval(function(){runtime()},1000)},1000)};
    function init(){
        clock=document.querySelector('#clock');
        for (var i in textList){
            for (var j in textList[i][0]){
                var temp=createLabel(textList[i][0][j]);
                clock.appendChild(temp);textList[i][1].push(temp);}}console.log(textList);}
    function createLabel(text){
        var div=document.createElement('div');div.classList.add('label');div.innerText=text;return div;}
    function runtime(){
        var now=new Date();var month=now.getMonth();var day=now.getDate();
        var week=now.getDay();var hour=now.getHours();var minute=now.getMinutes();
        var seconds=now.getSeconds();
        var timeArr=[0,month,day - 1,week,hour,minute,seconds]
        console.log(timeArr);clearColor();rotateTransition(timeArr);addColor(timeArr);}
    function addColor(timeArr){
        for (var i=1; i < timeArr.length; i++){var index=timeArr[i];
            textList[i][1][index].classList.add('now')}}
    function clearColor(){
        var now=document.querySelectorAll('.now');
        now.forEach(function(item){item.classList.remove('now');})}
    function initTransition(){
        for (var i in textList){for (var item of textList[i][1]){
            item.style.transform='translate('+i * 80+'px,-50%)'
            item.style.transformOrigin=-(i * 80)+'px 50%';}}}
    function rotateTransition(timeArr){
        for (var i in textList){for (var j in textList[i][1]){
            var temp=textList[i][1][j];var deg=360 / textList[i][0].length * (j - timeArr[i]);
            temp.style.transform='translate('+i * 80+'px,-50%)'+' rotate('+deg+'deg)';}}}
    function numberToChinese(num){//将数字0到10转换成汉字
        const chineseNums=["零","一","二","三","四","五","六","七","八","九","十"];
        if (num <= 10){//特殊处理11到19以及整十的情况
            return chineseNums[num];
        }else if(num < 20){return "十"+(num === 10 ? "" : chineseNums[num - 10]);
        }else if(num % 10 === 0){return chineseNums[num / 10]+"十";
        }else{return chineseNums[Math.floor(num / 10)]+"十"+chineseNums[num % 10];}}
</script>
</body>
</html>