欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-18 12:20:58
你是公司的程序员,年会的时候公司要给员工抽奖发福利,要求你写一个页面小程序,用来随机选出幸运员工,分设一二三等奖大致如下图示例:   以下是点名器的一种思...

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

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

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

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>点名器</title>
  <style>
    .title{
      font-size:50px;
      font-family: 800;
      color:red;
      margin:50px 430px;
    }
    #uname{
      width: 300px;
      height: 200px;
      border:3px solid green;
      margin-left:300px;
      margin-top: 0px;
      font-size:50px;
      font-weight: 800;
      text-align: center;
      line-height: 200px;
      float:left;
    }
    .result{
      width: 300px;
      height: 200px;
      font-size: 16px;
      border:3px solid red;
      color:orange;
      margin-left: 100px;
      float:left;
    }

    .result p{
      color:blue;
      font-size: 12px;
    }
    .btn{
      width: 60px;
      height: 200px;
      margin:0 auto;
      margin-top: 20px;

    }
    .btn button{
      width: 50px;

    }
    #prize_3,#prize_2,#prize_1{
      color:red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div class="title">xx公司年会抽奖活动</div>
  <div id="uname" >祝君好运    
  </div>
  <div class="result">
    <p>三等奖:</p>
    <div id="prize_3"></div>
    <p>二等奖:</p>
    <div id="prize_2"></div>
    <p>一等奖:</p>
    <div id="prize_1"></div>
  </div>
  <div class="btn">
    <button onclick="demo()" id="bt">开始</button>
      <!-- <button onclick="stop()">结束</button> -->
  </div>
  <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>
</body>
</html>

以上所述是小编给大家介绍的javascript随机点名器详解整合,希望对大家有所帮助