<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>猜数字游戏</title>
<style>
#container {
width: 350px;
height: 600px;
margin: 300px 550px;
}
</style>
</head>
<body>
<div id="container">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<button id="reStart" style="color: #0be4d2;">重新开始游戏</button><br>
请输入要猜的数字:
<input type="text" id="guessNumber" >
<button id="guess" style="color: #0b72cc;">猜</button><br/>
已经猜的次数:<span id="count"></span><br>
结果:<span id="result"></span>
</div>
<!-- js代码 -->
<script>
var number=Math.floor(Math.random()*100+1);//0-100的整数
var count=0;//记录猜的次数
//点击猜之后的事件
$("#guess").click(function(){
count++;
//显示猜的次数
$("#count").text(count)
var guessNumber=$("#guessNumber").val()
if(guessNumber>number){
$("#result").text("猜大了!")
$("#result").css("color","blue")
}else if(guessNumber<number){
$("#result").text("猜小了!")
$("#result").css("color","blue")
}else{
$("#result").text("猜到了!")
$("#result").css("color","red")
}
})
$("#reStart").click(function(){
number=Math.floor(Math.random()*100+1)
count=0
$("#count").text("")
$("#result").text("")
})
</script>
</body>
</html>
03-26
5046
5046
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
