<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#isyou {
font-size: 80px;
text-align: center;
margin: 100px auto;
}
#btn {
width: 180px;
height: 60px;
border: none;
background: dodgerblue;
display: block;
margin: 0 auto;
color: #fff;
font-size: 30px;
border-radius: 6px;
text-align: center;
line-height: 60px;
cursor: pointer;
}
#btn:active {
background: slateblue;
}
</style>
</head>
<body>
<div id="isyou">请点击下面的按钮，开始抽奖</div>
<span id="btn">点击开始</span>
</body>
<script type="text/javascript">
var str = '赵立伟,宋宁,王泽堂,陈世跑,屈庆伸,陈刚,张涛,杨兴文,陈峰,左成发,高攀伟,杨凯峰,里祥瑞,吴家保,申浩,严思霞,杨晓辉,王松,周文利,孙光,董帅,刘猛,张毅,王超一,尹升建,林素溢,李旭,李梦雪,陶文君,高兴悦,邹丹丹,王绍康,王安智,卜祥赫,刘战阳,胡腾,孙引,余迎,王亚民,赵越,余瑶,王苏,李恩赐,黎瑞华,陶金叶,罗水平,蒲旺,张高飞,张磊,宋腾南,张帅杰,蒙丽娜,熊文豪,王惟安,孙学科,徐亚翔,邰振辉,宋瑞准,孙存浩,郑泽洋,刘炳芳,陈乾,蔡智泉,徐康,李锋,吴振涛,李延送';
// 1 字符串转化为数组
var stuArr = str.split(',');
// 2 获取节点对象
// console.log(stuArr);
var isyou = document.querySelector('#isyou');
var btn = document.querySelector('#btn');
// 默认状态为true,表示开始
// status 是关键字
var status1 = true;
var times = '';
// 3 绑定事件,开始定时器
btn.onclick = function () {
// 4 根据状态判定是开始还是结束
console.log(status, '8888');
if (status1) {
// 5 开启定时器
times = setInterval(function () {
// 5-1 随机出数组索引
var index = random(0, stuArr.length - 1)
//5-2 根据索引获取,元素的值....
var name = stuArr[index];
// console.logmes = setInterval(function () {
// 5-1 随机出数组索引
var index = random(0, stuArr.length - 1)
//5-2 根据索引获取,元素的值....
var name = stuArr[index];
// console.log(name);
// 5-3 放入到div中
isyou.innerHTML = name;
}, 30)
// 5-4 修改按钮的文字和状态标识
btn.innerHTML = '点击停止';
status1 = false;
console.log(status);
} else {
console.log(status, 111);
// 6 关闭定时器
clearInterval(times);
// 6-1 修改按钮的状态和文字
btn.innerHTML = '点击开始';
status1 = true;
}
}
// 随机数的方法
function random(min, max) {
return Math.round(Math.random() * (max - min) + min)
}
</script>
2410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
