Javascript特效：点名册（随机点名）

知识点

Math.random产生随机数

运行效果

点击开始随机动

点击结束停止

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {text-align: center}#name {font-size: 20px;margin-top: 20px}</style></head>
<body>
<button id="begin">开始点名</button>
<button id="end">结束点名</button>
<div id="name"></div>
<script>window.onload = function (ev) {// 1. 获取标签var begin = document.getElementById('begin');var end = document.getElementById('end');var name = document.getElementById('name');// 2. 定义变量var intervalID = null;var nameArr = ['科比','詹姆斯','麦迪','艾弗森','卡特','杜兰特','安东尼','韦德','罗斯'];name.innerText = nameArr[5];// 3. 接听点击begin.addEventListener('click',function (ev1) {clearInterval(intervalID);intervalID = setInterval(function () {// 3.1 产生随机数var s_index = parseInt(Math.random()*nameArr.length);name.innerText = nameArr[s_index];},20)});end.onclick = function (ev1) {clearInterval(intervalID);}}
</script>
</body>
</html>

Javascript特效：点名册（随机点名）相关推荐

JavaScript 课堂练习随机点名，被点过的名字不再出现
JavaScript 课堂练习随机点名,被点过的名字不再出现 <!DOCTYPE html> <html lang="en"> <head>& ...
JavaScript实现效果——随机点名
1.效果如下: 2.代码如下: (1)CSS body{background-color: hotpink; } .all{width: 1000px;height: 600px;margin: 0 ...
js做个随机点名的小游戏
用JavaScript做个随机点名的小游戏,用一个开关控制点名程序的开始与暂停 <!DOCTYPE html> <html lang="zh"><he ...
javascript 随机点名
javascript随机点名视频 https://www.bilibili.com/video/BV1PJ41177YW?p=4 代码 <!DOCTYPE html> <html ...
用php实现随机点名,使用javascript做的一个随机点名程序
这篇文章主要介绍了使用javascript做的一个随机点名程序,经测试,效果相当不错,需要的朋友可以参考下 /p> "http://www.w3.org/TR/html4/loose. ...
原生JavaScript实现随机点名
原生JavaScript实现随机点名一,HTML代码 <div id="center"><div id="showname">O_O ...
Javascript随机点名系统
本次分享JavaScript主要知识点涉及到for循环.if选择结构判断语句.数组的定义.定时器.清除定时器等. 运行后的效果图主要思路与方法开始按钮与结束按钮相互切换点击开始按钮,将按钮中的内 ...
SASS+Compass基本使用，结合JavaScript实现随机点名小系统
SASS+Compass基本使用,以一个随机点名demo为例 demo 源码:https://github.com/XieTongXue/call-over,效果请看(5),代码解释请看源码. (1) ...
html中自动随机点名的程序,JavaScript实现随机点名程序
本文实例为大家分享了js实现随机点名程序的具体代码,供大家参考,具体内容如下效果: 录制的gif效果图没那么理想,其实速度是比这个快的思路: 1.定义一个数组,存放名单 2.启动定时器,设定间隔时 ...
java网页随机点名册_javascript网页随机点名实现过程解析
主要知识点涉及if选择结构判断语句.数组的定义.定时器.清除定时器.日期对象的使用. 1.HTML结构随机点名 .box{ width: 200px; height: 200px; border: ...

Javascript特效：点名册（随机点名）

知识点

运行效果

代码

Javascript特效：点名册（随机点名）相关推荐

最新文章

热门文章