javascript实现随机点名

1.math随机数方法获取一个数，再根据这个随机数找到相应数组的索引，把索引对应的值取出来，进行展示，中间再利用setInterval()计时器实现循环，紧接着再利用settimeout（）计时器只执行一次特性暂停周期计时器。（也可以手动暂停）。

2.数组里面内容可自行修改，我用的是for循环生成的内容

HTML代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.data {width: 200px;margin: 100px;text-align: center;float: left;}#btn {width: 150px;height: 50px;font-size: 34px;font-weight: 300;color: #000;/* background: rgba(255, 0, 0, 0.2); *//* border: 1px solid red; */}#end {width: 150px;height: 50px;font-size: 34px;font-weight: 300;color: #000;/* background: rgba(255, 0, 0, 0.2);border: 1px solid red; */}#div {border: 2px solid red;width: 200px;height: 100px;line-height: 100px;font-size: 60px;color: crimson;}#datas{margin: 10px;width: 800px;float: left;}#datas span{width: 100px;height: 30px;margin: 6px;text-align: center;line-height: 30px;color: #000;border: 1px solid rgb(239, 130, 130);float: left;}</style>
</head>
<body>
<div class="data"><button id="btn">开始</button><!-- <button id="end">结束</button> --><div id="div"></div></div><div id="datas"></div>
</body></html>

javascript部分代码如下：

<script>var arr = [];for (let i = 1; i < 50; i++) {arr.push(i);}//数组里面内容可自行定义，我这里用的是for循环生成的数组内容。var datas=document.querySelector('#datas');for (let i = 0; i < arr.length; i++) {//利用for循环遍历数组var span=document.createElement('span');//动态创建span标签span.innerHTML=arr[i];//动态赋值datas.appendChild(span)//把span写入指定位在}var span=document.querySelectorAll('span');function show() {function random(min, max) {return Math.floor(Math.random() * [(max - min + 1) + min]);//生成随机并向下取整}var data = random(0, arr.length - 1);//调用随机函数并获取返回值var arr1 = arr.slice(data, data + 1);//利用数组方法提取指定位置元素div.innerHTML = arr1;//把获取的元素进行显示for (let i = 0; i < arr.length; i++) {span[i].style.backgroundColor='';//利用排他思想清空其他span颜色}span[data].style.backgroundColor='red';//给指定span上色}var btn = document.querySelector('#btn');var div = document.querySelector('#div');var end=document.querySelector('#end');var timer;btn.addEventListener('click', function () {//点击事件btn.disabled = true;//按钮禁止点击clearInterval(timer)//调用前先清除一下，防止重复调用timer = setInterval(show, 10)//利用周期计时器重复调用show函数setTimeout(function () {//利用setTimeout只执行一次的特性，设置延时调用clearInterval(timer);//清除周期调用计时器btn.disabled = false;//接触禁止点击}, 3000)//设置几秒后暂停})// end.addEventListener('click',function(){//手动结束//     clearInterval(timer);//     btn.disabled = false;// })</script>

javascript实现随机点名相关推荐

原生JavaScript实现随机点名
原生JavaScript实现随机点名一,HTML代码 <div id="center"><div id="showname">O_O ...
SASS+Compass基本使用，结合JavaScript实现随机点名小系统
SASS+Compass基本使用,以一个随机点名demo为例 demo 源码:https://github.com/XieTongXue/call-over,效果请看(5),代码解释请看源码. (1) ...
html中自动随机点名的程序,JavaScript实现随机点名程序
本文实例为大家分享了js实现随机点名程序的具体代码,供大家参考,具体内容如下效果: 录制的gif效果图没那么理想,其实速度是比这个快的思路: 1.定义一个数组,存放名单 2.启动定时器,设定间隔时 ...
javascript制作随机点名表
<html> <head> <meta http-equiv="Content-Type" content="text/html;chars ...
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 课堂练习随机点名,被点过的名字不再出现 <!DOCTYPE html> <html lang="en"> <head>& ...
Javascript随机点名系统
本次分享JavaScript主要知识点涉及到for循环.if选择结构判断语句.数组的定义.定时器.清除定时器等. 运行后的效果图主要思路与方法开始按钮与结束按钮相互切换点击开始按钮,将按钮中的内 ...
JavaScript实现效果——随机点名
1.效果如下: 2.代码如下: (1)CSS body{background-color: hotpink; } .all{width: 1000px;height: 600px;margin: 0 ...

javascript实现随机点名

javascript实现随机点名相关推荐

最新文章

热门文章