纯原生js实现点名时钟(锻炼你的思维)

阳光穿透心脏的1/2处 2022-04-15 07:06 287阅读 0赞

### **HTML代码:** ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>点名册</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
    <div id="box">
        <button id="begin">开始点名</button>
        <button id="end">结束点名</button>
        <div id="name"></div>
        <div id="sz">
            <div id="hour"></div>
            <div id="min"></div>
            <div id="second"></div>
        </div>
    </div>
    <script src="index.js"></script>
    </body>
    </html>

### CSS代码: ###

*{
        margin: 0;padding: 0;
    }
    body{
        text-align: center;
    }
    #box{
        width: 400px;height: 400px;border: 4px solid ghostwhite;
        background-color: #fff;margin: 0 auto;margin-top: 200px;position: relative;
    }
    button{
        background-color: #fff;width: 100px;height: 40px;margin-top:100px;
    }
    #name{
        width: 220px;height: 140px;text-align: center;margin: 0 auto;font-size: 40px;
        color: red;padding-top: 50px;margin-top: 20px;
    }
    #sz{
        width: 100px;height: 100px;background-color: #fff;
        position: absolute;right: 4px;bottom: 4px;background: url("img/clock.jpg");
    }
    #hour,#min,#second{
        position: absolute;width: 5px;height: 100px;top: 0;left: 50%;margin-left: -2px;
    }
    #hour{
        background: url("img/hour.png");
    }
    #min{
        background: url("img/minute.png");
    }
    #second{
        background: url("img/second.png");
    }

### JS代码: ###

/**
     * Created by Fengy.
     */
    
    window.onload = function(){
        /*1.获取所需要的标签*/
        var begin = document.getElementById('begin');
        var end = document.getElementById('end');
        var name = document.getElementById('name');
    
        var hour = document.getElementById('hour');
        var min = document.getElementById('min');
        var second = document.getElementById('second');
    
        /*2.定义变量*/
        var timer = null;
        var nameArr = ['学号01','学号02','学号03','学号04','学号05','学号06','学号07','学号08','学号09','学号10','学号11','学号12','学号13','学号14','学号15','学号16','学号17','学号18','学号19','学号20','学号21','学号22','学号23','学号24','学号25','学号26','学号27','学号28','学号29','学号30','学号31','学号32','学号33','学号34','学号35','学号36','学号37','学号38','学号39','学号40','学号41','学号42','学号43','学号44','学号45','学号46','学号47','学号48'];
        /*name.innerText = nameArr[0];*/
    
        /*3.监听事件的点击*/
        begin.onclick = function(){
            /*3.1清除定时器*/
            clearInterval(timer);
    
            /*3.2设置定时器*/
            timer = setInterval(function(){
                /*3.3随机数*/
                var s_index = parseInt(Math.random()*nameArr.length);
                var s_num = nameArr[s_index];
                name.innerText =s_num;
            },1)
        };
        end.onclick =function(){
            /*4.1结束定时器*/
            clearInterval(timer);
        };
    
        /*开启时钟的定时器*/
        setInterval(function(){
            /*5.1获取时间戳*/
            var date = new Date();
    
            /*5.2求出总毫秒数*/
            var millS = date.getMilliseconds();
            var s = date.getSeconds() + millS /1000;
            var m = date.getMinutes() + s / 60;
            var h = date.getHours() % 12+ m /60;
    
            /*5.3.旋转*/
            hour.style.transform = 'rotate('+ h * 30 + 'deg)';
            min.style.transform = 'rotate('+ m * 6 + 'deg)';
            second.style.transform = 'rotate('+ s * 6 + 'deg)';
        },10)
    };

### 效果图: ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Zlbmd5Q29kZXI_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Zlbmd5Q29kZXI_size_16_color_FFFFFF_t_70]: /images/20220415/a432e4428b6b4875b4318129743edb64.png