点名器

最新推荐文章于 2024-02-28 19:40:05 发布

LUCK.Y-ZT

最新推荐文章于 2024-02-28 19:40:05 发布

阅读量943

点赞数

文章标签： js html javascript

本文链接：https://blog.csdn.net/qq_52232797/article/details/111496587

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			h3{
				height: 45px;
				color: white;
				text-align: center;
				line-height: 45px;
				background-color: #6495ED;
				box-shadow: 3px 3px 5px #007AFF;
			}
			div{
				width: 500px;
				height: 400px;
				margin: 100px auto;
				box-shadow: 3px 3px 5px #ccc;
			}
			div h4{
				height: 50px;
				padding: 10px;
				text-align: center;
			}
			div p{
				width: 70%;
				height: 45px;
				line-height: 45px;
				text-align: center;
				margin: 40px auto;
			}
			div p input{
				display: block;
				width: 100%;
				height: 100%;
				font-size: 20px;
				text-align: center;
			}
			div p button{
				width: 120px;
				height: 35px;
				color: white;
				border: none;
				outline: none;
				background-color: #008B8B;
			}
			div p input,div p button{
				border-radius: 5px;
				box-shadow: 2px 2px 2px #ccc;
			}
		</style>
	</head>
	<body>
		<h3>TongBaiShan's name-list</h3>
		
		<div>
			<h4>name-list</h4>
			<p><input type="text"></p>
			<p><button onclick="show()">Start</button></p>
		</div>
		
		<script type="text/javascript">
			let nameNode = document.getElementsByTagName("input")[0];
			let btnNode = document.getElementsByTagName("button")[0];
			let nameArray = ['石坤坤',"何沛文","杨晨玙","王晨阳","张小豪","李鑫","丁铭扬","谢一飞"];
			//定时器变量
			let timer = null;
			
			//设置默认值
			nameNode.value = nameArray[0];
			
			function show(){
				if(timer == null){
					btnNode.innerHTML = "Stop";
					btnNode.style.color = "red";
					start();
					return;
				}
				btnNode.style.color = "white";
				btnNode.innerHTML = "Start";
				stop();
			}
			//开启点名器
			function start(){
				//生成随机下标
				let index = Math.floor(Math.random()*nameArray.length);
				//根据下标拿到对应的名字
				let name = nameArray[index];
				//将名字在页面显示出来
				nameNode.value = name;
				//重复上述动作
				timer = setTimeout(start,15);
			}
			//关闭定时器
			function stop(){
				clearTimeout(timer);
				timer = null;
			}
			
		</script>
	</body>
</html>

LUCK.Y-ZT

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点名器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } h3{ height: 45px; color: white; text-align: center; line-height: 45px
复制链接

扫一扫