原生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 相关文章推荐
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
js数组常用最重要的方法
Feb 04 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Python脚本获取操作系统版本信息
2016/12/17 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
python制作填词游戏步骤详解
2019/05/05 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
佳能法国商店:Canon法国
2019/02/14 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
项目资料员岗位职责
2013/12/10 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
校园文明倡议书
2014/05/16 职场文书
教师个人读书活动总结
2014/07/08 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫