Web课堂作业：随机点名界面

最新推荐文章于 2024-04-19 16:15:52 发布

Arciab

最新推荐文章于 2024-04-19 16:15:52 发布

阅读量614

点赞数 1

文章标签：前端 javascript html css

本文链接：https://blog.csdn.net/analysis_ql/article/details/129327899

版权

闲话少说，直接上代码。

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>随机点名</title>
		<!-- 这里用来设置样式 -->
		<style>
			/* 定义一个显示盒子 */
			.di {
				height: 200px;
				width: 200px;
				background-color: coral;
				line-height: 200px;
				/* 文字居中显示 */
				text-align: center;
				/* 文字颜色 */
				color: white;
				/* 使盒子居中 */
				margin: 0 auto;
				/* 设置字体大小 */
				font-size: 50px;
			}
			
			/* 设置按钮居中显示 */
			.bu {
				
				width: 151px;
				margin: 0 auto;
				/* margin-top设置上外边距 */
				margin-top: 20px;
			}
			/* 设置按钮样式 */
			button {
				height: 50px;
				width: 70px;
			}
		</style>
		<!-- JS部分，控制界面交互 -->
		<script type="text/javascript">
			//在这里定义一个数组，用于存储名字
			var names = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
			// 定义一个定时器interval
			var interval;
			// 这里是一个函数，当这个函数被点击时，将会启动定时器
			function startName() {
				// setInterval()定时器，需要设置两部分，功能和时间（单位为毫秒），中间用英文逗号隔开
				interval = setInterval(function() {
					// Math.random() 获取随机数
					// names.length 获取names数组大小
					// names.length - 1 因为数组是从零开始，所以减去1
					var number = Math.random() * (names.length - 1);
					// Math.round(number) 取整
					number = Math.round(number);
					// 打印输出
					document.getElementById("show").innerText = names[number];
				}, 10);
			}

			function end() {
				// clearInterval(interval) 清除定时器
				clearInterval(interval);
			}
		</script>
	</head>
	<body>
		<!-- 设置一个空盒子 -->
		<div class="di" id="show">
				<!-- 这里打印内容 -->
		</div>
		<div class="bu">
			<button onclick="startName()">开始</button>
			<button onclick="end()">结束</button>
		</div>

	</body>
</html>

好吧，这个功能太简单了，不会被笑话吧？