用JavaScript定义点击事件选取随机数

叫我魏什么

已于 2022-10-27 10:31:45 修改

阅读量1k

点赞数 1

文章标签： javascript 前端 html

于 2022-10-27 09:36:08 首次发布

本文链接：https://blog.csdn.net/Lou__Lan/article/details/127545777

版权

在页面上渲染一个随机选取数字的功能

<!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>Document</title>
</head>
<style>
    section {
        width: 500px;
        height: 400px;
        margin: 100px auto;
        overflow: hidden;
        background-color: aqua;
    }

    section #box {
        width: 300px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        margin: 80px auto 40px;
        font-size: 50px;
        font-weight: bold;
        background-color: greenyellow;
    }

    section #box+div {
        text-align: center;
    }
</style>

<body>
    <section>
        <div id="box">1</div>
        <div>
            <button id="startBtn">开始选择</button>
            <button id="endBtn">停止选择</button>
        </div>
    </section>
    <script>
        // 定义数组
        let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
        let timer;  // 声明变量
        let startBtn = document.getElementById('startBtn')  // 获取开始按钮的id
        let endBtn = document.getElementById('endBtn') // 获取停止按钮的id
        let box = document.getElementById('box')  // 获取显示随机数盒子的id

        startBtn.addEventListener('click', () => {  // 定义开始按钮的点击事件
            clearInterval(timer)                    // 清除上次点击的叠加的时间效果
            timer = setInterval(() => {             // 执行时间函数
                let num = Math.round(Math.random() * (arr.length - 1)) // 选取随机数
                box.innerHTML = arr[num];           // 把随机数渲染在页面上
            }, 100)
        })                                        
          // 清除 随机显示数字的时间函数
        endBtn.addEventListener('click', () => clearInterval(timer));
    </script>
</body>

</html>