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


Posted in Javascript onMay 07, 2019

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

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随机点名器详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
vue父组件触发事件改变子组件的值的方法实例详解
May 07 #Javascript
微信小程序:数据存储、传值、取值详解
May 07 #Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 #Javascript
详解Vue前端生产环境发布配置实战篇
May 07 #Javascript
7个好用的JavaScript技巧分享(译)
May 07 #Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 #Javascript
vue搜索和vue模糊搜索代码实例
May 07 #Javascript
You might like
如何写php程序?
2006/12/08 PHP
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
用python实现面向对像的ASP程序实例
2014/11/10 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
python的命名规则知识点总结
2019/10/04 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
Python extract及contains方法代码实例
2020/09/11 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
求职信模板怎么做
2014/01/26 职场文书
食品安全工作实施方案
2014/03/26 职场文书
家长会欢迎标语
2014/06/24 职场文书
中专生自荐信
2014/06/25 职场文书
环保建议书作文500字
2015/09/14 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
Python代码实现双链表
2022/05/25 Python