超赞随机点名系统（抽奖系统），快来看看是不是你想要的（附完整源码）

2025-07-27 14:06:58

超赞随机点名系统（抽奖系统），快来看看是不是你想要的（附完整源码）名称：随机点名系统新人在线求点赞，有什么建议也可以在评论里告诉我哦~ 需求及功能： 1、点击按钮开始随机，再次点击按钮停止随机； 2、已经被随机到的下一次开始随机时将不能再被随机到；、随机的位数可根据需求进行自定义，随机

超赞随机点名系统（抽奖系统），快来看看是不是你想要的（附完整源码）

名称：随机点名系统

新人在线求点赞，有什么建议也可以在评论里告诉我哦~

需求及功能：

1、点击按钮开始随机，再次点击按钮停止随机；
2、已经被随机到的下一次开始随机时将不能再被随机到；
、随机的位数可根据需求进行自定义，随机到之后出现姓名；
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]设置为红[newarr[i]].style.background=red//用于将随机到之后设置的红变回之前的颜if(count!=newarr[i]){[count].style.background=blueviolet}count=newarr[i];//两侧图片随机j=rand(0,11)[j].style.zIndex=2;[j].style.zIndex=2;if(num!=j){[num].style.zIndex=0;[num].style.zIndex=0;}num=j;},10)}

主按钮设置：

//开始与停止按钮 = function(){//isRunning值预设为false,用于判断当前是否正在随机if(!isRunning){btn1.innerHTML = 停 止;isRunning = true;startRun();}else{btn1.innerHTML=开 始;isRunning = false;[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: 6px;background-color: pink;line-height: 6px;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>讲&emsp;&emsp;台</div><div id=all><div id=pic1>  <img src=img/1.jpg><img src=img/2.jpg><img src=img/.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/.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-#fffffffunction yanSe(){var result = #for(var i = 0; i < 6; i){result = rand(0,15).toString(16)}return result;}//随机数生成函数，随机生成n-m之间的随机整数，包括n和mfunction rand(n,m){return nparseInt(Math.random()*(m-n1));}//在数组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]设置为红[newarr[i]].style.background=red//用于将随机到之后设置的红变回之前的颜if(count!=newarr[i]){[count].style.background=blueviolet}count=newarr[i];//两侧图片随机j=rand(0,11)[j].style.zIndex=2;[j].style.zIndex=2;if(num!=j){[num].style.zIndex=0;[num].style.zIndex=0;}num=j;},10)}//停止运行函数function pasue(){clearInterval(timer)}//开始与停止按钮 = function(){//isRunning值预设为false,用于判断当前是否正在随机if(!isRunning){btn1.innerHTML = 停 止;isRunning = true;startRun();}else{btn1.innerHTML=开 始;isRunning = false;[newarr[i]].innerHTML=arr[newarr[i]]//通过随机到的数从arr数组中获取对应的姓名pasue();newarr.splice(i,1)//将随机过的数从原数组中删除}}//背景颜切换按钮 = function(){bod.style.backgroundColor=yanSe();}</script>
</body>
</html>

两侧表情图片：

可根据需要进行获取，
注意保存图片路径，及图片名;
img src=“img/1.jpg”
图片保存所在的文件夹img应与html文件在同一级。

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/shuma/857022.html

本站网友成骨不全	10分钟前发表
10px;font-size
本站网友小次郎	21分钟前发表
k;var count = 0;var num = 0;var shu = 0;var timer;var isRunning = false;var newarr=[];var arr=[ 张三
本站网友保湿爽肤水	23分钟前发表
block;width
本站网友今年猪价行情	17分钟前发表
关羽
本站网友养胃吃什么好	23分钟前发表
10px;font-size
本站网友水上农庄	16分钟前发表
赵云
本站网友盈峰翠邸君墅	22分钟前发表
40px;position
本站网友旁氏洗面奶好用吗	7分钟前发表
典韦
本站网友养老保险并轨	11分钟前发表
典韦

超赞随机点名系统（抽奖系统），快来看看是不是你想要的（附完整源码）