javascript案例11——摇号、点名、随机点名

最新推荐文章于 2024-09-11 15:33:18 发布

耶啵奶膘

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量1.1k

点赞数 2

分类专栏： javascript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/xulihua_75/article/details/124641319

版权

javascript 专栏收录该内容

56 篇文章 6 订阅

订阅专栏

一、案例描述

点击开始按钮，所有的开始滚动显示，在不点击停止的情况下，“开始”按钮无法再次点击。之后停止之后才能再开始点名。

二、案例效果演示

请添加图片描述

三、案例局部代码

html代码：

<h1 id="h1"></h1>
<button onclick="start()">开始</button>
<button onclick="stops()">停止</button>

js代码：

<script>
    var h1 = document.getElementById('h1');
    var startbtn = document.querySelector('button');
    var arr = ['王一博', '肖战', '杨洋', '易烊千玺', '迪丽热巴', '许佳琪', '赵今麦'];
    var dong;

    function start() {
        startbtn.disabled = true; //点过开始按钮后就不能再点击了。只有停止过后才可以再点。
        dong = setInterval(getRandom, 50); //想改时间的话从这里改名字切换的时间。
    }

    function stops() {
        clearInterval(dong); //清除定时器
        if (startbtn.disabled == true) {
            startbtn.disabled = false;
        }
    }

    function getRandom() {
        var runNum = Math.floor(Math.random() * arr.length); //含最大值，含最小值 索引值的随机数。
        h1.innerHTML = arr[runNum];
    }
</script>

四、案例整体代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点名</title>
</head>

<body>
    <h1 id="h1"></h1>
    <button onclick="start()">开始</button>
    <button onclick="stops()">停止</button>
    <script>
        var h1 = document.getElementById('h1');
        var startbtn = document.querySelector('button');
        var arr = ['王一博', '肖战', '杨洋', '易烊千玺', '迪丽热巴', '许佳琪', '赵今麦'];
        var dong;

        function start() {
            startbtn.disabled = true; //点过开始按钮后就不能再点击了。只有停止过后才可以再点。
            dong = setInterval(getRandom, 50); //想改时间的话从这里改名字切换的时间。
        }

        function stops() {
            clearInterval(dong); //清除定时器
            if (startbtn.disabled == true) {
                startbtn.disabled = false;
            }
        }

        function getRandom() {
            var runNum = Math.floor(Math.random() * arr.length); //含最大值，含最小值 索引值的随机数。
            h1.innerHTML = arr[runNum];
        }
    </script>
</body>

</html>