二、小功能模块——抽奖

缺乏、安全感 2022-03-12 16:38 228阅读 0赞

这个是简单版本的，适合新手，但是所有的复杂的都是在简单的基础上进行修饰，原理是一样的，越努力越优秀

先来讲一下思路：

1、用h2标签放置中奖人名单

2、有两个按钮

（1）开始：我们需要点击开始按钮，点击完开始后，修改h2标签里面的内容，里面的内容每300毫秒随机改变1次；

用数组存放公司员工的名称，然后使用Math.random()函数产生0—1（不包含1）的随机数。

通过数组的长度（10）和随机数可以随机得到一个0-10（不包括10）的数

（2）暂停：当我们点击暂停停止内容的改变：清除定时器

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>抽奖</title>
    	</head>
    	<body>
    		<h2 id="txt">请开始</h2>
    		<button id="start">开始</button>
    		<button id="pause">暂停</button>
    		<script>
    			var timer;
    			var flag=false;
    			var arr=['李斯','李斯','项少羽','张良','赵云','马超','关羽','张辽','独孤求败','吕布'];
    			/*获取标签*/
    			var ostart=document.getElementById('start');
    			var opause=document.getElementById('pause');
    			var otxt=document.getElementById('txt');
    			/*增加点击事件*/
    			/*开始*/
    			ostart.onclick=function(){
    				flag=true;
    				clearInterval(timer);
    				timer=setInterval(function(){
    					var a=parseInt(Math.random()*arr.length);
    					otxt.innerHTML=arr[a];
    				},300);
    				
    			}
    			/*暂停*/
    			opause.onclick=function(){
    				if(flag){
    					clearInterval(timer);
    					/*这里不能使用arr[a],因为arr[a]是在ostart.onclick函数内部的,是一个局部变量*/
    					/*otxt.innerHTML='恭喜'+arr[a]+'中奖了';*/
    					otxt.innerHTML='恭喜'+otxt.innerHTML+'中奖了';
    					flag=false;
    				}
    				
    			}
    			
    		</script>
    	</body>
    </html>