<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
padding-bottom: 40px;
overflow: hidden;
box-sizing: border-box;
}
.lis {
display: block;
width: 115px;
height: 52px;
background-color: #99ceff;
float: left;
margin-right: 40px;
text-align: center;
color: #0c3d67;
line-height: 52px;
}
.list_box {
width: 1200px;
margin: 100px auto;
}
.list_box li span:last-child {
/* border: solid red 1px; */
margin-right: 0;
}
.bg1 {
background-color: #994bff;
color: #fff;
}
.bg2 {
background-color: #ff4b8b;
color: #fff;
}
.bg3 {
background-color: #8b0685;
color: #fff;
}
#oneBtn {
width: 200px;
height: 56px;
background: #51aded;
border: none;
font-size: 20px;
color: #fff;
border-radius: 8px;
}
#threeBtn {
width: 200px;
height: 56px;
background: #ff4b8b;
border: none;
font-size: 20px;
color: #fff;
border-radius: 8px;
}
#fivBtn {
width: 200px;
height: 56px;
background: #8b0685;
border: none;
font-size: 20px;
color: #fff;
border-radius: 8px;
}
.btn {
margin-bottom: 40px;
text-align: center;
}
.title h1 {
margin-bottom: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="list_box" id="box">
<div class="title">
<h1>下面的人中谁最帅</h1>
</div>
<div class="btn">
<input type="button" value="单个点名" id="oneBtn">
<input type="button" value="3个点名" id="threeBtn">
<input type="button" value="5个点名" id="fivBtn">
</div>
<ul id="ulLis">
<li>
<span class="lis">德玛西亚</span>
<span class="lis">德玛西亚</span>
<span class="lis">德玛西亚</span>
<span class="lis">德玛西亚</span>
<span class="lis">德玛西亚</span>
<span class="lis">德玛西亚</span>
<span class="lis">德玛西亚</span>
<span class="lis">德玛西亚</span>
</li>
<li>
<span class="lis">诺克萨斯</span>
<span class="lis">诺克萨斯</span>
<span class="lis">诺克萨斯</span>
<span class="lis">诺克萨斯</span>
<span class="lis">诺克萨斯</span>
<span class="lis">诺克萨斯</span>
<span class="lis">诺克萨斯</span>
<span class="lis">诺克萨斯</span>
</li>
<li>
<span class="lis">黑色玫瑰</span>
<span class="lis">黑色玫瑰</span>
<span class="lis">黑色玫瑰</span>
<span class="lis">黑色玫瑰</span>
<span class="lis">黑色玫瑰</span>
<span class="lis">黑色玫瑰</span>
<span class="lis">黑色玫瑰</span>
<span class="lis">黑色玫瑰</span>
</li>
<li>
<span class="lis">裁决之地</span>
<span class="lis">裁决之地</span>
<span class="lis">裁决之地</span>
<span class="lis">裁决之地</span>
<span class="lis">裁决之地</span>
<span class="lis">裁决之地</span>
<span class="lis">裁决之地</span>
<span class="lis">裁决之地</span>
</li>
</ul>
<div class="gettime">
<span style="font-size: 24px">倒计时</span>
<span id="djs" style="color: red">5</span>
<span>s</span>
</div>
</div>
<script>
var box = document.getElementById('box'); //获取最大的盒子
var ulLis = document.getElementById('ulLis'); //获取ul标签
var spans = ulLis.querySelectorAll('span') //获取每个姓名元素
var oneBtn = document.getElementById('oneBtn') //获取一个按钮
var threeBtn = document.getElementById('threeBtn') //获取三个按钮
var fivBtn = document.getElementById('fivBtn') //获取五个按钮
var djs = document.getElementById('djs');
var init;
var timer;
var count = 5;
var count = djs.innerText; //获取倒计时的数字
// 获取随机数
function random(num) {
var arr = [];
while (arr.length < num) {
var flag = true;
var ran = Math.floor(Math.random() * 31);
for (var i = 0; i < arr.length; i++) {
if (ran == arr[i]) {
flag = false;
}
}
if (flag) {
arr.push(ran)
}
};
return arr;
// console.log(arr)
}
count = 5;
oneBtn.onclick = function () {
// count = 5;
djs.innerText = count;
clearInterval(timer)
one()
}
threeBtn.onclick = function () {
// count = 5;
djs.innerText = count;
clearInterval(timer)
two()
}
fivBtn.onclick = function () {
// count = 5;
djs.innerText = count;
clearInterval(timer)
three()
}
function f2() {
var arr = random(3);
var id1 = 'sj_' + arr[0];
var spans1 = document.getElementById(id1);
spans1.classList.add('bg1')
}
function f3() {
var arr = random(3);
var id1 = 'sj_' + arr[0];
var id2 = 'sj_' + arr[1];
var id3 = 'sj_' + arr[2];
var spans1 = document.getElementById(id1);
var spans2 = document.getElementById(id2);
var spans3 = document.getElementById(id3);
spans1.classList.add('bg2')
spans2.classList.add('bg2')
spans3.classList.add('bg2')
}
function f4() {
var arr = random(5);
var id1 = 'sj_' + arr[0];
var id2 = 'sj_' + arr[1];
var id3 = 'sj_' + arr[2];
var id4 = 'sj_' + arr[3];
var id5 = 'sj_' + arr[4];
var spans1 = document.getElementById(id1);
var spans2 = document.getElementById(id2);
var spans3 = document.getElementById(id3);
var spans4 = document.getElementById(id4);
var spans5 = document.getElementById(id5);
spans1.classList.add('bg3')
spans2.classList.add('bg3')
spans3.classList.add('bg3')
spans4.classList.add('bg3')
spans5.classList.add('bg3')
}
// 给所有的span移除bg样式
function f1() {
for (var i = 0; i < spans.length; i++) {
spans[i].setAttribute('id', 'sj_' + i);
spans[i].classList.remove('bg1');
spans[i].classList.remove('bg2');
spans[i].classList.remove('bg3');
}
}
function one() {
console.log('ss')
timer = setInterval(function () {
f1();
f2();
}, 200)
times();
}
function two() {
timer = setInterval(function () {
f1();
f3();
}, 200)
times();
}
function three() {
// clearInterval(timer)
timer = setInterval(function () {
f1();
f4();
}, 100)
times();
}
function times() {
clearInterval(init)
init = setInterval(function () {
count--;
djs.innerText = count;
if (count == 0) {
clearInterval(timer);
clearInterval(init);
count = 5;
}
}, 1000)
}
</script>
</body>
</html>
随机倒计时抽奖
猜你喜欢
转载自blog.csdn.net/weixin_45176415/article/details/104854664
今日推荐
周排行