原生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 相关文章推荐
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
js获取系统的根路径实现介绍
Sep 08 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 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
一个捕获函数输出的函数
2007/02/14 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python实现ftp文件传输功能
2020/03/20 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
党的生日活动方案
2014/08/15 职场文书
2015年营业员工作总结
2015/04/23 职场文书
摘录式读书笔记
2015/07/01 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server
Vue操作Storage本地化存储
2022/04/29 Vue.js