名称：随机点名系统
新人在线求点赞，有什么建议也可以在评论里告诉我哦~
需求及功能：
1、点击按钮开始随机，再次点击按钮停止随机；
2、已经被随机到的下一次开始随机时将不能再被随机到；
3、随机的位数可根据需求进行自定义，随机到之后出现姓名；
4、两侧图片在随机时也进行随机；
5、背景颜色切换。
实现图片：
未进行一次随机时
点击开始按钮之后，按钮变成停止按钮，红色光标在所有的位置内进行跳动，此时点击停止后，光标将停在一个格子，并将该格子对应的姓名插入格子内
进行多次“点名”之后
70次”点名“之后
更换背景颜色功能，两边图片没有找到背景透明的，大家将就着看哈~
核心代码及思路：
随机功能的实现：
主要依靠Math.random()，Math.random()功能是生成[0,1）之间的随机数，我们再按照需要对其进行加减乘除运算，得到所需范围的数字；如果需要的是范围内的整数的话，我们只需要再次对它进行取整；
多次随机：
进行多次随机的话，我们需要用到setInterval(每一次计时运行的函数，计时时间毫秒数)计时器，我们将生成随机数函数放置在计时器内部，再设置计时时间为10毫秒，这样每过10毫秒就将生成一个随机数，1秒内可进行100个数的随机；
数组内容获取：
我们预先设置好两个数组，将对应的数字及姓名添加进其中，这样我们再将生成的随机数作为数组的索引，这样我们就可以实现随机获取数组中对应位置的元素了；
按钮设置：
为了防止多次点击开始按钮，而同时进行多次随机的情况发生，我们将开始与暂停按钮设置为同一个按钮，并通过设置一个var isRunning = false,判断当前是否正在随机。当正在随机，也就是点击了开始按钮之后，将isRunning赋值为true，同时将"开始"按钮转为"停止"按钮;点击了停止按钮之后，将isRunning赋值为false，同时将"停止"按钮转为"开始"按钮；
开始运行函数：
//开始运行函数
function startRun(){
//设置计时器，每0.01s运行一次内部函数
timer = setInterval(function(){
//随机生成 0 - 至数组长度-1（newarr.length-1）的随机数
i = rand(0,newarr.length-1)
//将生成的随机数设置为数组索引，将newarr[i]设置为红色
stuAll.children[newarr[i]].style.background="red"
//用于将随机到之后设置的红色变回之前的颜色
if(count!=newarr[i]){
stuAll.children[count].style.background="blueviolet"
}
count=newarr[i];
//两侧图片随机
j=rand(0,11)
pic11.children[j].style.zIndex="2";
pic22.children[j].style.zIndex="2";
if(num!=j){
pic11.children[num].style.zIndex="0";
pic22.children[num].style.zIndex="0";
}
num=j;
},10)
}
主按钮设置：
//开始与停止按钮
btn1.onclick = function(){
//isRunning值预设为false,用于判断当前是否正在随机
if(!isRunning){
btn1.innerHTML = "停 止";
isRunning = true;
startRun();
}else{
btn1.innerHTML="开 始";
isRunning = false;
stuAll.children[newarr[i]].innerHTML=arr[newarr[i]]
//通过随机到的数从arr数组中获取对应的姓名
pasue();
newarr.splice(i,1)//将随机过的数从原数组中删除
}
}
完整源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机点名系统</title>
<style>
h1{
text-align: center;font-size:42px ;line-height: 10px;
}
#colorBtn{
width: 100px;height: 40px;position: fixed;top: 10px;right: 10px;font-size: 12px;
background-color: #f1f1f1;border-radius: 10px;outline: none;
cursor: pointer;box-shadow:0px 2px 2px 0 ;
}
#jiangtai{
width: 240px;height: 36px;background-color: pink;line-height: 36px;
margin: 5px auto;text-align: center;font-weight: bold;font-size: 18px;
border-radius: 5px;
}
#all{
display: flex;justify-content: center;margin-top: 10px;
}
#allStu{
width: 880px;height: 450px;display: flex;flex-wrap: wrap;
justify-content: space-between;align-content: space-between;
}
/* 默认设置为10人一排，可根据需要进行更改 */
#stu{
width: 9.1%;height: 46px;background-color: blueviolet;text-align: center;
line-height: 46px;color: white;font-size: 18px;border-radius: 10px;
}
#btn{
margin: 10px auto;display: block;width: 200px;height: 60px;
line-height: 60px;background-color: #f1f1f1;font-size: 20px;
border-radius: 20px;outline: none;cursor: pointer;
box-shadow:0px 2px 2px 0 ;
}
#pic1,#pic2{
width: 120px;height: 120px;background-color: pink;
position: relative;margin: 50px;
}
img{
position: absolute;width: 100%;height: 100%;
}
</style>
</head>
<body id="doc" >
<button id="colorBtn">点击更换<br/>背景颜色</button>
<h1>点名系统</h1>
<div id="jiangtai">讲  台</div>
<div id="all">
<div id="pic1">
<img src="img/1.jpg"><img src="img/2.jpg"><img src="img/3.jpg"><img src="img/4.jpg"><img src="img/5.jpg">
<img src="img/6.jpg"><img src="img/12.jpg"><img src="img/8.jpg"><img src="img/9.jpg"><img src="img/10.jpg">
<img src="img/11.jpg"><img src="img/7.jpg">
</div>
<div id = "allStu">
<!-- 一个div代表一个学生 -->
<div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div>
<div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div>
<div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div>
<div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div>
<div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div>
<div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div>
<div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div>
<div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div>
<div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div>
<div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div>
<div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div>
<div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div>
<div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div>
<div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div><div id="stu"></div>
</div>
<div id="pic2">
<img src="img/1.jpg"><img src="img/2.jpg"><img src="img/3.jpg"><img src="img/4.jpg"><img src="img/5.jpg">
<img src="img/6.jpg"><img src="img/12.jpg"><img src="img/8.jpg"><img src="img/9.jpg"><img src="img/10.jpg">
<img src="img/11.jpg"><img src="img/7.jpg">
</div>
</div>
<button id="btn">开 始</button>
<script>
var i,j,k;
var count = 0;
var num = 0;
var shu = 0;
var timer;
var isRunning = false;
var newarr=[];
var arr=['张三','李四','王五','关羽','张飞','赵云','吕布','典韦','马超','黄忠','许褚','孙策','太史慈','夏侯惇','夏侯渊','张辽','张三','李四','王五','关羽','张飞','赵云','吕布','典韦','马超','黄忠','许褚','孙策','太史慈','夏侯惇','夏侯渊','张辽','张三','李四','王五','关羽','张飞','赵云','吕布','典韦','马超','黄忠','许褚','孙策','太史慈','夏侯惇','夏侯渊','张辽','张三','李四','王五','关羽','张飞','赵云','吕布','典韦','马超','黄忠','许褚','孙策','张三','李四','王五','关羽','张飞','赵云','吕布','典韦','马超','黄忠'];
var stuAll=$id("allStu")
var btn1 = $id("btn")
var pic11 =$id("pic1")
var pic22 =$id("pic2")
var bod = $id("doc")
var colorBtn1 = $id("colorBtn")
//传入元素id,返回指定id元素
function $id(id){
return document.getElementById(id)
}
//生成一个随机颜色编码#000000-#ffffff
function yanSe(){
var result = "#"
for(var i = 0; i < 6; i++){
result += rand(0,15).toString(16)
}
return result;
}
//随机数生成函数，随机生成n-m之间的随机整数，包括n和m
function rand(n,m){
return n+parseInt(Math.random()*(m-n+1));
}
//在数组newarr中填入0-69这70个数
for(var a = 0 ; a < 70 ; a ++){
newarr.push(a)
}
//开始运行函数
function startRun(){
//设置计时器，每0.01s运行一次内部函数
timer = setInterval(function(){
//随机生成 0 - 至数组长度-1（newarr.length-1）的随机数
i = rand(0,newarr.length-1)
//将生成的随机数设置为数组索引，将newarr[i]设置为红色
stuAll.children[newarr[i]].style.background="red"
//用于将随机到之后设置的红色变回之前的颜色
if(count!=newarr[i]){
stuAll.children[count].style.background="blueviolet"
}
count=newarr[i];
//两侧图片随机
j=rand(0,11)
pic11.children[j].style.zIndex="2";
pic22.children[j].style.zIndex="2";
if(num!=j){
pic11.children[num].style.zIndex="0";
pic22.children[num].style.zIndex="0";
}
num=j;
},10)
}
//停止运行函数
function pasue(){
clearInterval(timer)
}
//开始与停止按钮
btn1.onclick = function(){
//isRunning值预设为false,用于判断当前是否正在随机
if(!isRunning){
btn1.innerHTML = "停 止";
isRunning = true;
startRun();
}else{
btn1.innerHTML="开 始";
isRunning = false;
stuAll.children[newarr[i]].innerHTML=arr[newarr[i]]
//通过随机到的数从arr数组中获取对应的姓名
pasue();
newarr.splice(i,1)//将随机过的数从原数组中删除
}
}
//背景颜色切换按钮
colorBtn1.onclick = function(){
bod.style.backgroundColor=yanSe();
}
</script>
</body>
</html>
两侧表情图片：
可根据需要进行获取，
注意保存图片路径，及图片名;
img src=“img/1.jpg”
图片保存所在的文件夹img应与html文件在同一级。
1916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
