html中自动随机点名的程序,JavaScript实现随机点名程序
本文实例为大家分享了js实现随机点名程序的具体代码,供大家参考,具体内容如下
效果:
录制的gif效果图没那么理想,其实速度是比这个快的
思路:
1.定义一个数组,存放名单
2.启动定时器,设定间隔时间不断调用函数
3.Math.random()获取随机下标,根据下标的随机变换取出数组中对应的元素
4.逻辑代码完成后,通过DOM对象把变化的结果呈现在页面上
JS代码:
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 = "开 始"
}
}
HTML + CSS + JS 源码:
Document
#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;
}
随机名单
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 = "开 始"
}
}
这是我的一些思路,分享给大家!
如果你有更好的方法,欢迎下方留言相互交流!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html中自动随机点名的程序,JavaScript实现随机点名程序相关推荐
- JavaScript 生成随机验证码
JavaScript 生成随机验证码 文章目录 JavaScript 生成随机验证码 Math对象下 random方法
- 【在工程Word文档的大量表格中自动插入图片的python程序】
在工程Word文档的大量表格中自动插入图片的python程序 一.问题描述 在word的表格中插入图片代码 图形界面GUI设计 程序打包 一.问题描述 我的姐姐是一个工程技术公司的资料员,经常需要在w ...
- 在Red Hat Linux中自动运行程序
在Red Hat Linux中自动运行程序 1.开机启动时自动运行程序 Linux加载后, 它将初始化硬件和设备驱动, 然后运行第一个进程init.init根据配置文件继续引导过程,启动其它进程.通常 ...
- C语言试题四十七之程序定义了N×M的二维数组,并在主函数中自动赋值。请编写函数function(int a[N][M], int m),该函数的功能是:将数组右上半三角元素中的值乘以m。
1. 题目 程序定义了N×M的二维数组,并在主函数中自动赋值.请编写函数function(int a[N][M], int m),该函数的功能是:将数组右上半三角元素中的值乘以m. 2 .温馨提示 C ...
- 原生JavaScript实现随机点名
原生JavaScript实现随机点名 一,HTML代码 <div id="center"><div id="showname">O_O ...
- 单片机DPTR(DPH,DPL)和SP特殊寄存器C语言中应用?这三个特殊寄存器对C程序员来说是透明的,不用C程序员操作,编译的时候会自动运用这三个寄存器ACC寄存器和B寄存器也类似
单片机DPTR(DPH,DPL)和SP特殊寄存器C语言中应用?这三个特殊寄存器对C程序员来说是透明的,不用C程序员操作,编译的时候会自动运用这三个寄存器,ACC寄存器和B寄存器也类似 编译器把C译成指 ...
- sts html自动提醒,STS、Eclipse中编写java、html、javascript文件的自动提示设置 html标签属性提示 总结...
总结:STS.Eclipse中编写java.html.javascript文件的自动提示设置 html标签属性提示 解决方案: 一.HTML ①鼠标右键点击创建的文件,选择[Properties] ② ...
- wadl 生成java_在Spring MVC REST应用程序中自动生成WADL
wadl 生成java 上一次我们学习了WADL的基础知识 . 语言本身并没有那么有趣,只写了一篇有关它的文章,但是本文的标题揭示了为什么我们需要这些知识. JSR 311的许多实现:JAX-RS:R ...
- 在Spring MVC REST应用程序中自动生成WADL
上一次我们学习了WADL的基础知识 . 语言本身并没有那么有趣,只写了一篇有关它的文章,但是本文的标题揭示了为什么我们需要这些知识. JSR 311的许多实现:JAX-RS:RESTful Web服务 ...
最新文章
- 怎样解决VMware虚拟机无法连接外网问题
- python面试-2018年最常见的Python面试题答案(上篇)
- POJ 3469 Dual Core CPU(最小割模型的建立)
- Kubernetes 已经成为云原生时代的安卓,这就够了吗?
- Java 类的特性2
- OSSIM主要数据库表结构
- 腾讯游戏与NVIDIA合作发布START云游戏服务
- 奇安信代码安全实验室招贤纳士
- java 存储多叉树_JAVA多叉树森林的构造、内存存储与遍历
- 如何使用WindowsPerformanceToolKit对程序进行分析
- 推理框架runtime的动态输入、输出思路
- 请大家一起呼吁媒体不要进行幸还者回忆性采访
- android 多次点击事件,Android按钮onclick事件在多次单击后激发
- linux 小红伞使用手册,安装LINUX下小红伞图文教程.pdf
- 基于74系列芯片的红绿灯设计
- 金蝶k3服务器系统吗,金蝶k3能在云服务器上吗
- 少男杀手dodolook签约酷6网原创红人阵营
- uniapp中调用震动、系统铃声以及自定义铃声
- 数学之美读书笔记--摘抄
- 【已解决】树莓派4B+ wifi无法连接(提示认证失败)