Javascript随机点名系统

最新推荐文章于 2024-05-17 13:52:13 发布

m4587

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量1.2k

点赞数 1

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m4587/article/details/126612024

版权

本次分享JavaScript主要知识点涉及到for循环、if选择结构判断语句、数组的定义、定时器、清除定时器等。

运行后的效果图

效果图
主要思路与方法

开始按钮与结束按钮相互切换
点击开始按钮，将按钮中的内容修改为结束
点击结束按钮，按钮变成开始按钮
切换按钮判断按钮状态，如果按钮为开始按钮，将按钮变成结束按钮；
如果按钮为结束按钮，将按钮变成开始按钮。
定义一个数组用来存储人名，点击开始按钮，随机选择人名；
点击停止按钮，页面不再发生变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>随机点名</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			#index {
				width: 300px;
				height: 200px;
				border: none;
				margin: 50px auto;
				text-align: center;
			}

			#info {
				width: 100%;
				height: 80%;
				line-height: 160px;
				border-radius: 30px;
				background-color: darkgreen;
				box-shadow: 0 3px 3px 0 #dcdcdc;
				text-align: center;
				color: #dcdcdc;
				margin-bottom: 10px;
			}


			#btn {
				height: 40px;
				width: 60px;
				line-height: 40px;
				border: none;
				outline: none;
				background-color: wheat;
				border-radius: 30px;
				text-align: center;
				box-shadow: 0 3px 3px 0 #dcdcdc;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {

				var classMate = ["崔雪莉", "郭雪芙", "嘉歆", "阿芳", "雪灵", "老王", "刘疙瘩", "许大妈",
					"韩晁", "静涵", "允儿", "查灿灿", "靓影", "杨幂", "李静", "邓超", "李伟", "蓝老师",
					"金枝", "静恬", "允儿", "杨幂", "晶灵", "林志玲", "嘉懿", "流行", "邓超", "郭琦",
					"允儿", "许大妈", "林妹妹", "杨幂", "佳思", "吉玉", "张焕", "张赛", "师傅", "菊月",
					"王晶", "吉玟", "王飞", "林志玲", "曾艳", "王翠青", "JaydenLD"
				];
				
				var btn = document.getElementById("btn");
				var info = document.getElementById("info");
				var flag = false;
				var myinterval;

				btn.onclick = function() {

					flag = !flag;

					if (flag) {

						myinterval = setInterval(function() {
							var num = Math.floor(Math.random() * classMate.length);
							info.innerHTML = classMate[num]
						}, 50);

						btn.innerHTML = "暂停";
					} else {
						clearInterval(myinterval);
						btn.innerHTML = "开始";
					}


				}
			}
		</script>
	</head>
	<body>
		<div id="index">
			<div id="info">？？？</div>
			<button id="btn">开始</button>
		</div>
	</body>
</html>