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 相关文章推荐
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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初学者头疼十四条问题大总结
2008/11/12 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
javascript import css实例代码
2008/07/18 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
python绘制地震散点图
2019/06/18 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
咖啡书吧创业计划书
2014/01/13 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
爱心捐书倡议书
2015/04/27 职场文书
运动会表扬稿范文
2015/05/05 职场文书
计划生育责任书
2015/05/09 职场文书
倡议书怎么写?
2019/04/11 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
Python实现信息管理系统
2022/06/05 Python