原生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 相关文章推荐
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
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
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
python操作oracle的完整教程分享
2018/01/30 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
给面试官的感谢信
2014/02/01 职场文书
2014年环保工作总结
2014/11/26 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
使用Python解决图表与画布的间距问题
2022/04/11 Python