原生js实现随机点名

最新推荐文章于 2023-06-14 12:07:57 发布

代码De搬运工

最新推荐文章于 2023-06-14 12:07:57 发布

阅读量291

点赞数

文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/m0_46577631/article/details/130421053

版权

js实现随机点名

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>随机点名</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
			font-family: '微软雅黑'
		}
		body{
			background-image: url(./background.jpeg);
			background-size: 100%;
			background-repeat: no-repeat;
		}
		#showName{
			 display: flex;
			 justify-content: center;
			 font-size: 40px;
			 padding-top: 15%;
		}
		#showDom{
			 width: 500px;
			 height: 100px;
			 text-align: center;
			 line-height: 100px;
			 border-radius: 10px;
			 background: rgb(246, 245, 245);
			 box-shadow: 0px 0px 16px rgb(110, 109, 109);
			 overflow: hidden;

		}
		#showBtn{
			 display: flex;
			 justify-content: center;
			 padding-top: 5%;
		}
		#startName{
			text-align: center;
			line-height: 36px;
			width: 90px;
            height: 36px;
			background: linear-gradient(to left, #70b1f5, #4284f7,#FFFFFF);
			border-radius: 6px;
			cursor: pointer;
		}
		#startName:hover{
			background: linear-gradient(to left, #a7c0f6, #52a0f8,#FFFFFF);
		}
	</style>
</head>
<body>
	   <div id="content">
		    <div id="showName">
				   <div id="showDom">我要开始点名咯！</div>
			</div>
			<div id="showBtn">
				   <div id="startName">开始点名</div>	
			</div>
	   </div> 
</body>
<script>
	     var nameList=["点不到我！","蔡徐坤🐔","王嘉尔","张嘉佳","李嘉欣","周慧敏","白敬亭","王一博","李一一","钱三一","张馨艺"];
         var time=null;
		 var startName=document.getElementById('startName');
		 var showDom=document.getElementById("showDom");
		 startName.addEventListener('click',function(){
                 if(time==null){
                      startName.innerHTML="停止点名";
                      show();
                 }else{
					  startName.innerHTML="开始点名";
                      clearInterval(time);
                      time=null;
                 }
		 })
        function show(){
                 var num=Math.floor(Math.random()*100000)%nameList.length; // 获取随机数
                 showDom.innerHTML=nameList[num]; //然后将名字数组根据随机数取的名字赋值渲染到页面上
                 time=setTimeout("show()",1); //设置定时器
          }
</script>
</html>