初学JavaScript之利用计时器做出的简单时钟

Posted 2020-12-04 qjdxb
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初学JavaScript之利用计时器做出的简单时钟相关的知识，希望对你有一定的参考价值。
//由于刚学html时间不久，javascript也是刚刚接触，有很多繁琐代码，希望多多体谅，后续会慢慢改进的
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简单时钟</title>
        <style type="text/css">
            .wrap{
                width: 400px;
                height: 400px;
                border:1px solid black;
                border-radius: 50%;
                margin: 50px auto;
                position: relative;
            }
            .wrap .center .circle{
                border-radius: 50%;
                width: 10px;
                height: 10px;
                background-color: orangered;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -5px;
                margin-left: -5px;        
            }
            .inner12_6,.inner1_7,.inner2_8,.inner3_9,.inner4_10,.inner5_11{
                width: 4px;
                height: 400px;
                /*background: black;*/
                position: absolute;
                left: 50%;
                margin-left: -2px;
            }
            .inner1_7{
                transform: rotateZ(30deg);
            }
            .inner2_8{
                transform: rotateZ(60deg);
            }
            .inner3_9{
                transform: rotateZ(90deg);
            }
            .inner4_10{
                transform: rotateZ(120deg);
            }
            .inner5_11{
                transform: rotateZ(150deg);
            }
            .inner12,.inner1,.inner2,.inner3,.inner4,.inner5{
                width: 4px;
                height: 20px;
                background: black;
                position: absolute;
                top: 0;    
            }
            .inner6,.inner7,.inner8,.inner9,.inner10,.inner11{
                width: 4px;
                height: 20px;
                background: black;
                position: absolute;
                bottom: 0;        
            }
            .inner12>span{
                position: absolute;
                top: 20px;
                left: -5px;
            }
            .inner6>span{
                position: absolute;
                bottom: 20px;
                left: -3px;
            }
            .inner1>span{
                position: absolute;
                top: 20px;
                left: -3px;
                transform: rotateZ(-30deg);
            }
            .inner7>span{
                position: absolute;
                bottom: 20px;
                left: -3px;
                transform: rotateZ(-30deg);
            }
            .inner2>span{
                position: absolute;
                top: 20px;
                left: -3px;
                transform: rotateZ(-60deg);
            }
            .inner8>span{
                position: absolute;
                bottom: 20px;
                left: -3px;
                transform: rotateZ(-60deg);
            }
            .inner3>span{
                position: absolute;
                top: 20px;
                left: -3px;
                transform: rotateZ(-90deg);
            }
            .inner9>span{
                position: absolute;
                bottom: 20px;
                left: -3px;
                transform: rotateZ(-90deg);
            }
            .inner4>span{
                position: absolute;
                top: 20px;
                left: -3px;
                transform: rotateZ(-120deg);
            }
            .inner10>span{
                position: absolute;
                bottom: 20px;
                left: -5px;
                transform: rotateZ(-120deg);
            }
            .inner5>span{
                position: absolute;
                top: 20px;
                left: -3px;
                transform: rotateZ(-150deg);
            }
            .inner11>span{
                position: absolute;
                bottom: 20px;
                left: -5px;
                transform: rotateZ(-150deg);
            }
            .wrap .center{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: rotate(180deg);
            }
            .hour{
                width: 6px;
                height: 100px;
                background: seagreen;
                position: absolute;
                left: 2px;
                border-radius: 6px;
                transform-origin: 0px 3px;
            }
            .minu{
                width: 4px;
                height: 150px;
                background: dodgerblue;
                position: absolute;
                transform-origin: 0px 2px;
                left: -2px;            
            }
            .sec{
                width: 2px;
                height: 180px;
                background: red;
                position: absolute;
                left: -2px;
                transform-origin: 0px 1px;    
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            
            <div class="inner12_6">
                <div class="inner12"><span>12</span></div>
                <div class="inner6"><span>6</span></div>
            </div>
            
            <div class="inner1_7">
                <div class="inner1"><span>1</span></div>
                <div class="inner7"><span>7</span></div>
            </div>
            <div class="inner2_8">
                <div class="inner2"><span>2</span></div>
                <div class="inner8"><span>8</span></div>
            </div>
            <div class="inner3_9">
                <div class="inner3"><span>3</span></div>
                <div class="inner9"><span>9</span></div>
            </div>
            <div class="inner4_10">
                <div class="inner4"><span>4</span></div>
                <div class="inner10"><span>10</span></div>
            </div>
            <div class="inner5_11">
                <div class="inner5"><span>5</span></div>
                <div class="inner11"><span>11</span></div>
            </div>
                        
            <div class="center">
                <div class="hour"></div>
                <div class="minu"></div>
                <div class="sec"></div>
                <div class="circle"></div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var hour = document.querySelector(".hour");
        var minu = document.querySelector(".minu");
        var sec = document.querySelector(".sec");
                
        function clock(){
            var now = new Date;
            var hoursDeg = now.getHours()/12*360;
            var minutesDeg = now.getMinutes()/60*360;
            var secondsDeg = now.getSeconds()/60*360+360;
            //console.log(hoursDeg,minutesDeg,secondsDeg);
            hour.style.transform = "rotate("+hoursDeg+"deg)";
            minu.style.transform = "rotate("+minutesDeg+"deg)";
            sec.style.transform = "rotate("+secondsDeg+"deg)";
        }
        clock();
        setInterval(clock,1000);
    </script>
</html>
以上是关于初学JavaScript之利用计时器做出的简单时钟的主要内容，如果未能解决你的问题，请参考以下文章
用 JavaScript 构建倒计时时钟
通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助
用JavaScript或php怎么写一个倒计时时钟啊
Flash Canvas HTML5 Javascript 中的倒数时钟计时器
JavaScript时钟与定时器
Android之利用JSBridge库实现Html，JavaScript与Android的所有交互