js做个随机点名的小游戏

最新推荐文章于 2022-08-18 21:34:44 发布

Eason_Lou

最新推荐文章于 2022-08-18 21:34:44 发布

阅读量3.1k

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_54366356/article/details/121858988

版权

前端专栏收录该内容

28 篇文章 3 订阅

订阅专栏

用JavaScript做个随机点名的小游戏，用一个开关控制点名程序的开始与暂停

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>随机点名</title>
		<script src="./js/plugins/simditor/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		#name_div,
		#name_wrap {
			font-family: STXingkai;
		}

		#name_div {
			font-size: 48px;
		}

		#name_wrap span {
			margin: 10px;
		}
	</style>
	<body>
		<div id="Gallery">
			<div id="name_wrap">

			</div>
			<div id="name_div">

			</div>
			<button type="button" id="switch_btn">start</button>

		</div>

		<script type="text/javascript">
			var timer = null;
			var data = ['王小明', '张小三', '王二狗', '钱小五', '孙小萌', '刘二柱'];
			var str = ''
			for (let name of data) {
				str += "<span>" + name + "</span>"
			};
			document.getElementById("name_wrap").innerHTML = str;
			document.getElementById("switch_btn").onclick = function() {
				var btn_text = document.getElementById("switch_btn").innerHTML;
				switch (btn_text) {
					case 'start':
						document.getElementById("switch_btn").innerHTML = 'stop'
						timer = setInterval(function() {
							var index = (Math.random() * (data.length - 1)).toFixed(0)
							document.getElementById("name_div").innerText = '今晚吃火锅谁请客:' + data[index]
						}, 20)
						break;
					case 'stop':
						document.getElementById("switch_btn").innerHTML = 'start'
						clearInterval(timer)
						break;
					default:
						break;
				}
			}
		</script>
	</body>
</html>

效果截图:

在这里插入图片描述

Eason_Lou

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js做个随机点名的小游戏

用JavaScript做个随机点名的小游戏，用一个开关控制点名程序的开始与暂停<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content
复制链接

扫一扫

专栏目录