还在为今天吃点啥感到纠结么?

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>随机点餐器</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			#main {
				margin: 100px;
				background: #ff6600;
				width: 520px;
				padding: 50px;
				border-radius: 20px 20px 20px 20px;
				box-shadow: 0 2px 12px #666666;
			}
			
			#box {
				background: #cccccc;
				margin: 50px;
				padding: 20px;
				font-size: 55px;
				font-weight: bold;
				border-radius: 15px 15px 15px 15px;
				box-shadow: 0 2px 12px #666666;
			}
			
			#bt {
				width: 100px;
				font-size: 20px;
				font-weight: bold;
				background-color: green;
				border-radius: 8px 8px 8px 8px;
				box-shadow: 0 2px 12px #666666;
				cursor: pointer;
				padding: 5px;
			}
		</style>
		<script>
			var namelist = [
				"辣子鸡", "水饺", "麻辣烫", "火锅",
				"米线", "烤肉", "日本料理",
				"麻辣香锅", "烤鱼", "烤串", "螺蛳粉",
			];

			var mytime = null;

			function doit() {
				var bt = document.getElementById("bt");
				if(mytime == null) {
					bt.innerHTML = "停 止";
					bt.style.backgroundColor = "red";
					show();
				} else {
					bt.innerHTML = "开 始";
					bt.style.backgroundColor = "green";
					clearTimeout(mytime);
					mytime = null;
				}
			}

			function show() {
				var box = window.document.getElementById("box");
				var num = Math.floor((Math.random() * 100000)) % namelist.length;
				box.innerHTML = namelist[num];
				mytime = setTimeout("show()", 50);
			}
		</script>
	</head>

	<body>
		<center>
			<div id="main">
				<div id="box">随机点餐器</div>
				<button id="bt" onclick="doit()">开 始</button>
			</div>
		</center>
	</body>

</html>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页