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

本文链接：https://blog.youkuaiyun.com/FengyCoder/article/details/84349504

本文通过HTML、CSS和JavaScript代码实现了一个点名时钟的功能，详细展示了各个部分的代码实现，帮助读者理解并锻炼JavaScript编程思维。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
};