<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>