原生js写随机点名案例

最新推荐文章于 2024-12-09 22:08:46 发布

Eva_kevin

最新推荐文章于 2024-12-09 22:08:46 发布

阅读量259

点赞数

文章标签： javascript css html5 css3 es6

本文链接：https://blog.youkuaiyun.com/kevin_ZKW/article/details/104831299

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 200px;
        height: 100px;
        line-height: 100px;
        font-size: 30px;
        background: dodgerblue;
        margin: auto;
        text-align: center;
    }

    .btn {
        width: 200px;
        height: 50px;
        margin: auto;
        line-height: 50px;
        text-align: center;
    }

    .btn button {
        margin: 0 10px;
        width: 60px;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
    }
</style>

<body>
    <div class="box">
        点击开始
    </div>
    <div class="btn">
        <button class="start">开始</button>
        <button class="stop">结束</button>
    </div>
</body>
<script>
    var arr = ['小明', '丽丽', '妹妹', 'never', '帅弟弟', '佩奇', '汤姆', '王二麻子', 'baby', '梅梅', '赵钱李', 'jack']
    function $(ele) { return document.querySelector(ele) }
    var timer = null;//初始化计时器
    //开始
    $('.start').onclick = function () {
        timer = setInterval(function () {
            //获取下标
            var index = parseInt(Math.random() * arr.length)
            $('.box').innerHTML = arr[index]
        }, 800)
    }
    //停止按钮
    $('.stop').onclick = function () {
        clearInterval(timer);
    }
</script>
</html>