原生js实现随机点名功能


Posted in Javascript onNovember 05, 2019

本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下

原生js实现随机点名功能

原生js实现随机点名,js部分有注释

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
      
    }
    .wrapper{
      width: 800px;
      margin: 10px auto;
      border: 2px solid #ccc; 
      text-align: center;
    }
    .lucking{
      width: 200px;
      height: 180px;
      border: 1px solid #000;
      position: relative;
    }
    .lucking img{
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .wrapper ul li{
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      margin: 4px;
      border:2px solid #ccc;
      border-radius: 5px;
      /* 不设置float:left的原因
      1: 浮动不能让父盒子撑开高度 
      2: display:inline-block 具有行内元素的属性特征,给父盒子加text-align:center 可使其居中
      */
      display: inline-block;
    }
    .wrapper button{
      margin-top: 20px;
      width: 80px;
      height: 40px;
      border: none;
      background-color: #ddd;
      border-radius: 5px;
      font-weight: 700;
      outline: none;
      cursor: pointer;
    }
    .wrapper .active{
      background-color: #f1084a;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="wrapper" id="_wrapper">
    <ul id="_ul"></ul>
    <button class="start">开始点名</button>
    <button class="stop">停止</button>
    <div class="lucking" id="_lucking">
      <p></p>
      <img src="1.gif" alt="">
    </div>
  </div>
</body>
</html>
<script>
  var array = ['杨雨婷','张蓓','王洁','邓伦','李易峰','杨雨婷','张蓓','王洁','邓伦','李易峰','杨雨婷','张蓓','王洁','邓伦','李易峰','杨雨婷','张蓓','王洁','邓伦','李易峰','杨雨婷','张蓓','王洁','邓伦','李易峰','杨雨婷','张蓓','王洁','邓伦','李易峰','杨雨婷','张蓓','王洁','邓伦'];
  // 获取元素
  var _wrapper = document.getElementById('_wrapper');
  var ul = document.getElementById('_ul');;
  var timer = null;
  init();

  function init(){
  // 动态创建li
  for(var i = 0; i < array.length;i++)
  {
    var oli = document.createElement('li');
    oli.innerHTML = array[i];
    ul.appendChild(oli);
  }
  // 点击
    click();
  }
  function click(){
    // 获取start按钮
    var start = _wrapper.getElementsByTagName('button')[0];
    var stop = _wrapper.getElementsByTagName('button')[1];
    var lucking = document.getElementById('_lucking');
    // 定时器
    start.addEventListener('click',function(){
      clearInterval(timer);
      timer = setInterval(function(){
        // 获得随机数
        var random = Math.floor(Math.random()*array.length);
        for(var i = 0;i < array.length;i++)
        {
          ul.children[i].className = '';
        }
        ul.children[random].className = 'active';
      },50);
    });
    stop.addEventListener('click',function(){
      clearInterval(timer);
      // 找到此时的元素
      var active = document.getElementsByClassName('active')[0];
      lucking.children[0].innerText = "幸运儿:" + active.innerText;
    })
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
9个JavaScript评级/投票插件
Jan 18 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
element-ui 文件上传修改文件名的方法示例
Nov 05 #Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 #Javascript
javascript如何实现create方法
Nov 04 #Javascript
关于vue里页面的缓存详解
Nov 04 #Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 #Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 #Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 #Javascript
You might like
操作Oracle的php类
2006/10/09 PHP
获取远程文件大小的php函数
2010/01/11 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
python格式化字符串实例总结
2014/09/28 Python
浅谈Python中的闭包
2015/07/08 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
python简单实现AES加密和解密
2019/03/28 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
智乐游戏测试笔试题
2014/05/21 面试题
亲子拓展活动方案
2014/02/20 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
2014年中秋寄语
2014/08/11 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
2014年话务员工作总结
2014/11/19 职场文书
2015年幼师工作总结
2015/04/28 职场文书
催款律师函范文
2015/05/27 职场文书
趣味运动会赞词
2015/07/22 职场文书
小学数学教学随笔
2015/08/14 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
Go归并排序算法的实现方法
2022/04/06 Golang