⽤js写随机抽奖代码
<!-- 样式  -->
<style>
.title {
width: 300px;
height: 50px;
background-color: orange;
text-align: center;
margin: 0 auto;
margin-bottom: 20px;
line-height: 50px;
}
#box {
margin: 0 auto;
width: 600px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
/* border: 1px solid black; */
}
.box-item {
width: 23%;
padding: 30px 0;
box-sizing: border-box;
/* border: 1px solid red; */
background-color: rgb(0, 255, 221);
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.btn {
margin: 0 auto;
width: 600px;
display: flex;
justify-content: space-around;
}
.btn-item {
width: 200px;
padding: 15px 0;
text-align: center;
background-color: orange;
}
</style>
<h3 class="title">随机抽奖</h3>
<div id="box">
</div>
<div class="btn">
<div class="btn-item" id="start">开始</div>
<div class="btn-item" id="end">结束</div>
</div>
<script>
// 定义⼀个数组，⾥⾯输⼊抽奖的东西
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var _box = ElementById('box');
box sizing
var html = '';
for (let i = 0; i < arr.length; i++) {
html += '<div class="box-item" >' + arr[i] + '</div>';
}
_box.innerHTML = html;
var _start = ElementById('start');
var _end = ElementById('end');
_lick = function() {
_time = setInterval(function() {
let index = Math.floor(Math.random() * arr.length);
for (let j = 0; j < _box.children.length; j++) {
_box.children[j].style.backgroundColor = "rgb(0, 255, 221)";                }
_box.children[index].style.backgroundColor = "red";
}, 100);
}
_lick = function() {
clearInterval(_time);
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。