JavaScript实现随机点名程序


Posted in Javascript onMarch 25, 2020

本文实例为大家分享了js实现随机点名程序的具体代码,供大家参考,具体内容如下

效果:

JavaScript实现随机点名程序

录制的gif效果图没那么理想,其实速度是比这个快的

思路:

1.定义一个数组,存放名单
2.启动定时器,设定间隔时间不断调用函数
3.Math.random()获取随机下标,根据下标的随机变换取出数组中对应的元素
4.逻辑代码完成后,通过DOM对象把变化的结果呈现在页面上

JS代码:

<script>
var arr = ["唐僧", "孙悟空", "猪八戒", "沙悟净", "白骨精", "玉皇大帝", "红孩儿", "白骨精", "太上老君"]

var myTimer = null //定时器编号

// 既是启动定时器的函数,也是停止定时器的函数
function goAndStop(){
 // 如果当前没有定时器在执行,则启动,否则,停止定时器;
 if(myTimer == null){
  // 启动定时器,随机下标,取出名字
  myTimer = setInterval(function(){
   // 1、随机下标
   var index = parseInt(Math.random()*arr.length)

   // 2、根据下标取出学生的姓名,显示在页面上
   document.getElementById("stuName").innerHTML = arr[index]

  },10);

  //启动定时器的同时,改变按钮状态,为下次单击做准备
  document.getElementById("btn").value = "停 止"
 }else{
  // 当前若有有定时器在执行,则停止定时器, 恢复初始状态
  window.clearInterval(myTimer)
  myTimer = null
  document.getElementById("btn").value = "开 始"
 }
}
</script>

HTML + CSS + 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>
 #box{
  width:200px;
  height: 300px;
  margin: 100px auto;
 }

 #stuName{
  width: 100%;
  height: 80px;
  border: 2px solid gray;
  line-height: 80px;
  text-align: center;
  font-size: 30px;
  color:orange;
  font-weight: bold;
 }

 input{
  margin-top:30px;
  width: 100%;
  height: 50px;
  font-size: 20px;
  font-weight: bold;
 }

 </style>
</head>
<body>
 <div id="box">
  <div id="stuName">
   随机名单
  </div>
  <input id="btn" type="button" value="开 始" onclick="goAndStop()">
 </div>
</body>
</html>
<script>
var arr = ["唐僧", "孙悟空", "猪八戒", "沙悟净", "白骨精", "玉皇大帝", "红孩儿", "白骨精", "太上老君"]

var myTimer = null 
function goAndStop(){
 if(myTimer == null){
  myTimer = setInterval(function(){
   var index = parseInt(Math.random()*arr.length)

   document.getElementById("stuName").innerHTML = arr[index]

  },10);
  document.getElementById("btn").value = "停 止"
 }else{
  window.clearInterval(myTimer)
  myTimer = null
  document.getElementById("btn").value = "开 始"
 }
}
</script>

这是我的一些思路,分享给大家!

如果你有更好的方法,欢迎下方留言相互交流!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery插件 cluetip 关键词注释
Jan 12 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 #Javascript
JS实现网页时钟特效
Mar 25 #Javascript
js实现小时钟效果
Mar 25 #Javascript
vue页面更新patch的实现示例
Mar 25 #Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 #Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 #Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 #Javascript
You might like
PHP生成UTF8文件的方法
2010/05/15 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
详解微信UnionID作用
2019/05/15 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python实现2048小游戏
2015/03/30 Python
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
python中正则的使用指南
2016/12/04 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
NET程序员上机面试题
2015/05/23 面试题
美容师的职业规划书
2013/12/27 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
如何使用SQL Server语句创建表
2022/04/12 SQL Server