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

最新推荐文章于 2024-07-26 08:00:00 发布

0131

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量180

点赞数 1

分类专栏：一些个小玩意文章标签： css html javascript

本文链接：https://blog.csdn.net/csdn_yuan_/article/details/107727762

版权

一些个小玩意专栏收录该内容

3 篇文章 1 订阅

订阅专栏

<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>

0131

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
还在为今天吃点啥感到纠结么？

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>随机点餐器</title> <style> * { margin: 0px; padding: 0px; } #main { margin: 100px; background: #ff6
复制链接

扫一扫

专栏目录