html实现随机点名器的示例代码

此点名器开始点名后需点击停止按钮完成点名，因为是精简版没有考虑自动停止需求。姓名数据以字符串形式储存，适合小范围点名使用，有大量需求可自己适当改进。

head>
        meta charset="UTF-8">
        meta name="viewport" content="width=device-width, inITial-scale=1.0">
        title>
    随机点名生成/title>
        style>
        /* 页面css样式 */        .wrapPEr {
                width: 800px;
                margin: 100px auto;
                border: 1px solid #ddd;
                text-align: center;
        }
        .box li {
                vertical-align: top;
                display: inline-block;
                width: 100px;
                height: 50px;
                border: 2px solid #ddd;
                border-radius: 15px;
                text-align: center;
                line-height: 50px;
                margin: 5px;
        }
                .wrapper button {
                border: none;
                width: 100px;
                height: 50px;
                border-radius: 10px;
                cursor: pointer;
                outline: none;
                margin-top: 20px;
                font-weight: bolder;
                color: #333;
                background-color: rgb(14, 146, 43);
        }
        .wrapper button {
                display: inline-block;
        }
        body {
                background-color: #eee;
        }
        /style>
    /head>
    body>
        div class="wrapper">
         h1 align="center">
    随机点名系统/h2>
          //实时显示系统时间标签        h6 id="data" align="right">
    /h6>
            ul class="box">
    /ul>
            button class="start">
    开始/button>
            button class="stop">
    停止/button>
        /div>
    /body>
    script>
        //定义全局变量方便引用    VAR boxUl = document.getElementsByclassname('box')[0];
        var start = document.getElementsByClassName('start')[0];
        var stop = document.getElementsByClassName('stop')[0]    var oLi = document.getelementsbytagname('li');
        //数据准备    var namestring = new String("张三,李四,王五,赵六,周七,田八,国九,归零,张3,李4,王5,赵6,周7,田8,国9,归0");
        var nameArr = nameString.split(",");
        //获取每个学生姓名添加到标签中，自动解析htML标签    var str = "";
        for (let i = 0;
     i  nameArr.length;
 i++) {
            str += "li >
    " + nameArr[i] + "/li>
"    }
        boxUl.innerHTML = str;
        //添加开始按钮的点击事件    var timer = null;
    start.onclick = function () {
        // 设置定时器        timer = setInterval(function () {
                // 根据数组长度范围生成随机数            var i = Math.floor(Math.random() * nameArr.length);
                // 先通过for循环清空所有style属性            for (var j = 0;
     j  oLi.length;
 j++) {
                    oLi[j].removeAttribute("style");
            }
                // 为随机选择的li颜色属性            oLi[i].style.background = "red";
        }
    , 150);
    }
    ;
    // 点击停止    stop.onclick = function () {
            // 清空定时器停止点名        clearInterval(timer);
    }
    //页面初始化时间设置    window.onload = function () {
            datatime();
    }
        //页面时间动态刷新    setInterval(datatime, 1000);
    function datatime() {
            let data = new Date();
            let dataString ="现在是北京时间：" + data.toLocaleString();
            document.getElementById("data").innerHTML = dataString;
    }
    /script>
    

附一张效果图

到此这篇关于html实现随机点名器的示例代码的文章就介绍到这了,更多相关html随机点名器内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！