原生JS实现随机点名项目的实例代码


Posted in Javascript onApril 30, 2019

核心思想

•随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停。

所用知识

•Math.random() * num: 产生从0到num的随机数
•Math.floor(): 向下取整
•简单的DOM操作等

技术扩展

•扩展人数
•添加停止键等

效果

原生JS实现随机点名项目的实例代码

代码如下

•html:

<div class="container">
  <section class="demo">
   <ul>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  </section>
  <section class="students"><ul></ul></section>
  <section class="buttonList">
   <ul>
    <li><button type="button">随机选一个</button></li>
    <li><button type="button">随机选两个</button></li>
    <li><button type="button">随机选三个</button></li>
   </ul>
  </section>
 </div>

•css:

<style type="text/css">
  * {
   margin: 0;
   padding: 0;
  }
  ul {
   list-style: none;
  }
  body {
   width: 100%;
   height: 100%;
   background: url("images/bg.jpg") no-repeat;
   background-size: cover;
  }
  button {
   border: none;
   background-color: transparent;
   color: #fff;
   font-size: 20px;
  }
  .container {
   width: 1200px;
   height: 700px;
   margin: 10px auto;
  }
  .container .demo, .container .buttonList {
   width: inherit;
   height: 25%;
  }
  .container .students {
   width: inherit;
   height: 50%;
  }
  .container .students li {
   margin-right: 50px;
   margin-bottom: 30px;
   text-align: center;
   border-radius: 10px;
   font-size: 20px;
   font-weight: bold;
  }
  .container .students li:nth-child(5n) {
   margin-right: 0;
  }
  .container .buttonList li button {
   float: left;
   width: 200px;
   height: 60px;
   background-color: #4caf5085;
   margin-right: 150px;
   text-align: center;
   line-height: 60px;
   border-radius: 10px;
   margin-top: 50px;
   font-weight: bold;
  }
  .container .buttonList li button:hover {
   background-color: #4caf50;
  }
  .container .buttonList li:nth-child(1) {
   margin-left: 150px;
  }
  .container .demo li {
   width: 200px;
   height: 150px;
   background-color: #4caf5085;
   float: left;
   margin-right: 150px;
   border-radius: 50%;
   margin-top: 10px;
   line-height: 150px;
   font-weight: bold;
   color: #fff;
   font-size: 60px;
   text-align: center;
  }
  .container .demo li:first-child {
   margin-left: 150px;
  }
 </style>

•javascript:

<script type="text/javascript">
  var stuArray = ["小方", "小田", "小明", "小红", "小吕", "小于", "小美", "小绿", "李华", "小李", "小胡",
   "小夏", "小徐", "小小", "小吴", "小陈", "小狗", "小许", "小熊", "小新"];
  var stuList = document.querySelector(".students").querySelector("ul");
  var buttonList = document.querySelectorAll("button");
  var demoList = document.querySelector(".demo").querySelectorAll("li");
  

  for (var i = 0; i < stuArray.length; i++) {
   var li = document.createElement("li");
   stuList.appendChild(li);
   li.innerHTML = stuArray[i];
   li.style.cssFloat = "left";
   li.style.width = 200 + "px";
   li.style.height = 60 + "px";
   li.style.backgroundColor = "#4caf5085";
   li.style.color = "#fff";
   li.style.lineHeight = 60 + "px";
  }

  var stuArrayList = stuList.querySelectorAll("li");

  function chooseOne () {
   for (var i = 0; i < stuArrayList.length; i++) {
    stuArrayList[i].style.background = "#4caf5085";
   }
   for (var i = 0; i < demoList.length; i++) {
    demoList[i].innerHTML = "";
   }
   var interId = setInterval(function () {
    var x = Math.floor(Math.random() * stuArray.length);
    stuArrayList[x].style.backgroundColor = "green";
    demoList[1].innerHTML = stuArrayList[x].innerHTML;
    var timeId = setTimeout(function () {
     stuArrayList[x].style.backgroundColor = "#4caf5085";
    }, 100);
    var y = Math.floor(Math.random() * stuArray.length);
    if (y == x) {
     clearTimeout(timeId);
     clearInterval(interId);
     stuArrayList[y].style.backgroundColor = "green";
    }
   }, 100);
  }

  function chooseTwo () {
   for (var i = 0; i < stuArrayList.length; i++) {
    stuArrayList[i].style.background = "#4caf5085";
   }
   for (var i = 0; i < demoList.length; i++) {
    demoList[i].innerHTML = "";
   }
   var interId = setInterval(function () {
    do {
     var x1 = Math.floor(Math.random() * stuArray.length);
     var x2 = Math.floor(Math.random() * stuArray.length);
    } while (x1 == x2);
    stuArrayList[x1].style.backgroundColor = "green";
    stuArrayList[x2].style.backgroundColor = "green";
    demoList[0].innerHTML = stuArrayList[x1].innerHTML;
    demoList[2].innerHTML = stuArrayList[x2].innerHTML;
    var timeId = setTimeout(function () {
     stuArrayList[x1].style.backgroundColor = "#4caf5085";
     stuArrayList[x2].style.backgroundColor = "#4caf5085";
    }, 100);
    var y1 = Math.floor(Math.random() * stuArray.length);
    var y2 = Math.floor(Math.random() * stuArray.length);
    if ((y1 == x1 && y2 == x2) || (y1 == x2 && y2 == x1)) {
     clearTimeout(timeId);
     clearInterval(interId);
     stuArrayList[x1].style.backgroundColor = "green";
     stuArrayList[x2].style.backgroundColor = "green";
    }
   }, 100);
  }

  function chooseThree () {
   for (var i = 0; i < stuArrayList.length; i++) {
    stuArrayList[i].style.background = "#4caf5085";
   }
   for (var i = 0; i < demoList.length; i++) {
    demoList[i].innerHTML = "";
   }
   var interId = setInterval(function () {
    do {
     var x1 = Math.floor(Math.random() * stuArray.length);
     var x2 = Math.floor(Math.random() * stuArray.length);
     var x3 = Math.floor(Math.random() * stuArray.length);
    } while (x1 == x2 || x2 == x3 || x1 == x3);
    stuArrayList[x1].style.backgroundColor = "green";
    stuArrayList[x2].style.backgroundColor = "green";
    stuArrayList[x3].style.backgroundColor = "green";
    demoList[0].innerHTML = stuArrayList[x1].innerHTML;
    demoList[1].innerHTML = stuArrayList[x2].innerHTML;
    demoList[2].innerHTML = stuArrayList[x3].innerHTML;
    var timeId = setTimeout(function () {
     stuArrayList[x1].style.backgroundColor = "#4caf5085";
     stuArrayList[x2].style.backgroundColor = "#4caf5085";
     stuArrayList[x3].style.backgroundColor = "#4caf5085";
    }, 100);
    var y1 = Math.floor(Math.random() * stuArray.length);
    var y2 = Math.floor(Math.random() * stuArray.length);
    var y3 = Math.floor(Math.random() * stuArray.length);
    if ((x1 == y1 && x2 == y2) || (x1 == y2 && x2 == y1)) {
     clearTimeout(timeId);
     clearInterval(interId);
     stuArrayList[x1].style.backgroundColor = "green";
     stuArrayList[x2].style.backgroundColor = "green";
     stuArrayList[x3].style.backgroundColor = "green";
    }
   }, 100);
  }
  buttonList[0].addEventListener("click", function () {chooseOne()}, false);
  buttonList[1].addEventListener("click", function () {chooseTwo()}, false);
  buttonList[2].addEventListener("click", function () {chooseThree()}, false);

总结

以上所述是小编给大家介绍的原生JS实现随机点名项目的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
vue实现随机验证码功能的实例代码
Apr 30 #Javascript
详解vue 图片上传功能
Apr 30 #Javascript
vue移动端屏幕适配详解
Apr 30 #Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 #Javascript
微信小程序时间戳转日期的详解
Apr 30 #Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 #Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 #Javascript
You might like
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
JavaScript版代码高亮
2006/06/26 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
Windows下python3.6.4安装教程
2018/07/31 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
java字符串格式化输出实例讲解
2021/01/06 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
4s客服专员岗位职责
2013/12/01 职场文书
一名毕业生的自我鉴定
2013/12/04 职场文书
副厂长岗位职责
2014/02/02 职场文书
师德师风个人反思
2014/04/28 职场文书
操行评语大全
2014/04/30 职场文书
小学数学课题方案
2014/06/15 职场文书
社会工作专业求职信
2014/07/15 职场文书
2016年寒假见闻
2015/10/10 职场文书