用js制作简易的猜数器

最新推荐文章于 2023-04-12 16:49:31 发布

郭郭郭憨憨

最新推荐文章于 2023-04-12 16:49:31 发布

阅读量548

点赞数 3

文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/qq_59494319/article/details/125286557

版权

本代码就是娱乐用的，如果想查看答案可以在用本代码运行网页之后点击右键---》检查---》控制台/console就可以查看答案了。

在输入框中输入你猜的数字，
然后会和系统里随机的数字进行比较返回比较结果，
如果你手动输入的数字比随机的数字大，
会在页面里输出“猜大了”,若比随机数字小，会在页面里输出"猜小了"，
否则，就是"猜对了"，会出现对应提醒。如果猜对的话，会出现之前隐藏的一个按钮，
提醒你是否继续游戏，点击代表继续游戏，小按钮也会消失。

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			button:nth-of-type(2){
				display: none;
			}
			*{
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div id="wrapper"></div>
		<input type="text" placeholder="请输入你所猜的数字(1-100)" id="first">
		<button onclick="guess()">猜一猜</button>
		<button onclick="again()" id="bar">再来一次</button>
		<script>
			a=document.getElementById("wrapper");
			b=document.getElementById("first");
			c=Math.floor(Math.random()*101);//随机数0-100
			d=document.getElementById("bar");
			console.log(c);
			function guess(){
				if(parseFloat(b.value)<c){
					a.innerHTML=`猜小了`;
					b.value="";
				}else if(parseFloat(b.value)>c){
					a.innerHTML="猜大了";
					b.value="";
				}else{
					a.innerHTML="恭喜你，猜对了！！！";
					d.style.display="inline-block";
				}
			}
			function again(){
				c=Math.floor(Math.random()*100);
				console.log(c);
				b.value="";
				b.placeholder="请输入你所猜的数字(1-100)";
				a.innerHTML="";
				d.style.display="none";
			}
		</script>
	</body>
</html>