点名器小案例

最新推荐文章于 2022-04-04 21:37:23 发布

原创最新推荐文章于 2022-04-04 21:37:23 发布 · 286 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css #js #html

小案例专栏收录该内容

3 篇文章

订阅专栏

点名器

简介

一个简单的点名器系统

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点名器</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        span{
            width: 80px;
            height: 30px;
            border-color: greenyellow;
            background-color: greenyellow;
            float: left;
            margin: 10px;
            text-align: center;
        }
        input{
            width: 100px;
            height: 50px;
            margin: 50px;
        }
    </style>
</head>
<body bgcolor="grey">
    <h1 align="center">随机点名系统</h1>
    <h4 align="right" id="time">2020/6/23</h6>
    <table align="center">
        <tr><td><div id="name"></div></td></tr>
        <tr align="center"><td><input type="button" id="begin" value="开始"><input type="button" id="pause" value="停止"></td></tr>
    </table>
    
</body>
<script>
    names = ["张三","李四","王五","周六","赵七","王八","李四","王五","周六","赵七","王八","王八","李四","王五","周六","赵七","王八"];
    var timer;
    $(function(){
        for(let i = 0; i < names.length; i++){
            let box = `<span class="box" name="${i}">${names[i]}</span>`;
            $("#name").append(box);
        }
    });
    //开始按钮的点击事件
    $("#begin").click(function(){
        $("#begin").attr("disabled",true);
        $("#pause").attr("disabled",false);
        timer = setInterval(function(){
            let num = Math.floor(Math.random()*names.length);
            $("span").css("background-color","greenyellow");
            $("span[name="+num+"]").css("background-color","red");
        },100)
    });
    //停止按钮的点击事件
    $("#pause").click(function(){
        $("#begin").attr("disabled",false);
        $("#pause").attr("disabled",true);
        clearInterval(timer);
    });
    //会动的时间
    function changeTime(){
        let time = new Date().toLocaleString();
        $("#time").text(time);
    }
    setInterval("changeTime()",1000);
</script>
</html>