原生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如何扑捉回车键触发的事件
Apr 24 Javascript
js数组操作常用方法
May 08 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
js点击选择文本的方法
Feb 09 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
利用JS实现数字增长
Jul 28 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
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
浅析is_writable的php实现
2013/06/18 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
十分钟教你上手ES2020新特性
2020/02/12 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
python绘制条形图方法代码详解
2017/12/19 Python
《Python学习手册》学习总结
2018/01/17 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
关于Python解包知识点总结
2020/05/05 Python
Python 日期与时间转换的方法
2020/08/01 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
Gap工厂店:Gap Factory
2017/11/02 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
数控专业毕业生求职信范文
2013/09/21 职场文书
简历自我评价模版
2014/01/31 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
民事诉讼代理词
2015/05/25 职场文书
电力培训学习心得体会
2016/01/11 职场文书
小学英语教学反思范文
2016/02/15 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python