随机点名小案例

最新推荐文章于 2025-04-16 09:21:03 发布

原创最新推荐文章于 2025-04-16 09:21:03 发布 · 271 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css样式表 #js计时器 #点击事件的应用

随机点名小案例

1，两个按钮操作：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .fu {
            width: 500px;
            height: 500px;
            box-shadow: 0 0 5px #000;
            margin: 50px auto;
            text-align: center;
            border-radius: 50%;
            overflow: hidden;
        }
        
        #box {
            width: 100%;
            height: 400px;
            font: 600 40px/10 "";
            background: #03e6ee;
        }
        
        #btn1 {
            width: 100%;
            height: 50px;
            border: 0;
            font: 16px/50px "";
            background: #0313ee;
        }
        
        #btn2 {
            width: 100%;
            height: 50px;
            border: 0;
            font: 16px/50px "";
            background: #ee0303;
        }
    </style>
</head>

<body>
    <div class="fu">
        <div id="box"></div>
        <input type="button" id="btn1" value="开始">
        <input type="button" id="btn2" value="结束">
    </div>
</body>
<script>
    var box = document.getElementById("box");
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var arr = ["张三", "李四", "王二", "小李", "小王", "健康", "快乐"]

    function random(a, b) {
        return Math.round(Math.random() * (a - b) + b);
    }
    var timer;
    btn1.onclick = function() {
        //btn1.disabled = true;
        clearInterval(timer);
        timer = setInterval(function() {
            box.innerHTML = arr[random(0, arr.length - 1)]
                //console.log(box.innerHTML)
        }, 300)
    }
    btn2.onclick = function() {
        clearInterval(timer);
    }
    </script>

</html>

2，一个按钮操作：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .fu {
            width: 500px;
            height: 500px;
            box-shadow: 0 0 5px #000;
            margin: 50px auto;
            text-align: center;
            border-radius: 50%;
            overflow: hidden;
        }
        
        #box {
            width: 100%;
            height: 400px;
            font: 600 40px/10 "";
            background: #03e6ee;
        }
        
        #btn1 {
            width: 100%;
            height: 50px;
            border: 0;
            font: 16px/50px "";
            background: #0313ee;
        }
        
        #btn2 {
            width: 100%;
            height: 50px;
            border: 0;
            font: 16px/50px "";
            background: #ee0303;
        }
    </style>
</head>

<body>
    <div class="fu">
        <div id="box"></div>
        <input type="button" id="btn1" value="开始">
        <input type="button" id="btn2" value="结束">
    </div>
</body>
<script>
    var box = document.getElementById("box");
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var arr = ["张三", "李四", "王二", "小李", "小王", "健康", "快乐"]

    function random(a, b) {
        return Math.round(Math.random() * (a - b) + b);
    }
    var i = 0;
    var timer;
    btn1.onclick = function() {
        if (i == 0) {
            clearInterval(timer);
            timer = setInterval(function() {
                box.innerHTML = arr[random(0, arr.length - 1)];
            }, 500)
            i = 1;
            btn1.value = "结束";
        } else {
            clearInterval(timer);
            i = 0
            btn1.value = "开始"
        }
    }
</script>

</html>