JS使用Math对象随机数实现点名功能

最新推荐文章于 2024-09-09 09:35:48 发布

可可崽

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量268

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_60585989/article/details/123248038

版权

 <h1 class="title">抽取系统</h1>
    <div class="box" id="box">
        <!-- <div class="box_item">1</div>
        <div class="box_item">2</div>
        <div class="box_item">3</div>
        <div class="box_item">4</div>
        <div class="box_item">5</div>
        <div class="box_item">6</div>
        <div class="box_item">7</div>
        <div class="box_item">8</div>
        <div class="box_item">9</div>
        <div class="box_item">10</div>
        <div class="box_item">11</div>
        <div class="box_item">12</div> -->
    </div>
    <div class="btn" id="start">开始</div>
    <div class="btn" id="end">结束</div>
    <script>
      
        // 使用Math对象随机数实现点名功能
        var arr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
        var _html = '';
        var _box = document.getElementById('box');
        for (let i = 0; i < arr.length; i++) {
            _html += '<div class="box_item">' + arr[i] + '</div>';
        }
        _box.innerHTML = _html;
        var _start = document.getElementById('start');
        _start.onclick = function() {
            _timer = setInterval(function() {
                var _index = Math.floor(Math.random() * arr.length);
                for (let i = 0; i < _box.children.length; i++) {
                    _box.children[i].style.backgroundColor = '#0ff';
                }
                _box.children[_index].style.backgroundColor = '#f00';
            }, 100)
        }
        var _end = document.getElementById('end');
        _end.onclick = function() {
            clearInterval(_timer);
        }
    </script>
</body>