平安乐园_平安国际娱乐_平安娱乐官网「App下载」:一个值得你收藏的教程网站

最新下载

JavaScript实现随机点名器实例详解

时间:2019-05-07 17:22:52 编辑:猪哥 来源:转载

你是公司的程序员,年会的时候公司要给员工抽奖发福利,要求你写一个页面小程序,用来随机选出幸运员工,分设一二三等奖大致如下图示例:

JavaScript实现随机点名器实例详解

 JavaScript实现随机点名器实例详解

以下是点名器的一种思路,页面比较简陋,只给出了满足最基本要求的代码户要用到计时器,随机数函数等
本抽奖一二三等奖都只设一名幸运员工,开始结束功能用一个按钮实现




  
  点名器
  


  XX公司年会抽奖活动
  祝君好运    
  
  
    

三等奖:

二等奖:

一等奖:

<script> //获取显示框的内容 var Uname=document.getElementById('Uname'); //要随机的员工名单 var arr=['刘备','曹操','孙权','赵云','大乔','小乔','周瑜','尚香']; //获取按钮信息 var btn=document.getElementById('bt'); //定义变量存放计时器 var clock=0; //定义变量存放索引值 var inde=null; var prize_3=document.getElementById('prize_3'); var prize_2=document.getElementById('prize_2'); var prize_1=document.getElementById('prize_1'); // 定义是否开启计时器的标志,如果为真开始执行 如果为假则停止 var st=true; // 存放幸运员工名单 prizes=[]; function demo(){ if(st){ start(); btn.innerHTML="结束"; st=false; }else{ stop(); btn.innerHTML="开始"; st=true; } } // 开始函数 function start(){ clock=setInterval(function(){ var inde=rand(0,arr.length-1); Uname.innerHTML=arr[inde]; },50);//设置每50毫秒实行一次 } // 结束点名 function stop(){ //从列表最后添加元素 prizes.push(Uname.innerHTML); //关闭定时器 clearInterval(clock); //获取员工名字对应的索引值 arr.splice(arr.indexOf(Uname.innerHTML),1); //当抽奖次数达到三次时,在屏幕上显示幸运员工名单 if(prizes.length>=3){ prize_3.innerHTML=prizes[0]; prize_2.innerHTML=prizes[1]; prize_1.innerHTML=prizes[2]; } } // 封装获取随机数 函数 function rand(m,n){ return Math.floor(Math.random()*(n-m+1)+m); } </script>

文章评论

热门栏目