JavaScript实现随机点名器-CSDN博客

本文链接：https://blog.csdn.net/weixin_43894771/article/details/104790828

JavaScript实现随机点名器效果图
在这里插入图片描述
js实现随机点名器的思路
利用setTimeout()计时器实现随机的效果，功能函数

function show(){
				var box=window.document.getElementById("box");
				var num=Math.floor((Math.random()*100000))%namelist.length;
				box.innerHTML=namelist[num];
				mytime=setTimeout("show()",1);
			}

完整代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>点击按钮随机点名-样式布局参考</title>
        <style type="text/css">       
            #box {
                margin: auto;
                width: 660px;
                font-size: 66px;
                height: 94px;
                color: #138eee;
                text-align: center;
                margin-top: 200px;
            }           
            #bt {
                margin: auto;
                width: 200px;
                text-align: center;
                margin-top: 75px;
                color: #fff;
                font-size: 25px;
                cursor: pointer;
            }
        </style>
         <script type="text/javascript">
         	var namelist=["张三","李四","王五","赵六","孙七"];
			var mytime=null;
			
			function doit(){
				var bt=window.document.getElementById("bt");
				if(mytime==null){
					bt.innerHTML="停止";
					show();
				}
				else{
					bt.innerHTML="开始点名";
					clearTimeout(mytime);
					mytime=null;
				}
			}
			
			function show(){
				var box=window.document.getElementById("box");
				var num=Math.floor((Math.random()*100000))%namelist.length;
				box.innerHTML=namelist[num];
				mytime=setTimeout("show()",1);
			}
         </script>
    </head>
    <body id="bodybj" style="background-color: black;">
        <div id="box">亲，准备好点名了吗？</div>
        <div id="bt" onclick="doit()">开始点名</div>
    </body>
</html>