|
通过html实现java中的随机数猜测小游戏
下文演示
思路:
-
构造前端页面:
①主容器包裹三个p标签+一个button标签
②实现对按钮的hover效果
③通过js对页面获取写入内容 -
js思路:
①按钮绑定提交函数{
函数包含对输入框内容的提取
对所猜测内容的innerhtml写入
对生命条数的判定，并在适当时候给与用户提示
}
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
a{
display: none;
}
#container{
width: 200px;
height: 120px;
background-color: pink;
margin:100px auto;
}
#num2{
border: none;
width: 195px;
height: 30px;
background-color: antiquewhite;
color: red;
margin: 10px auto;
}
#button{
display: block;
width: 3.125rem;
margin: auto;
border: none;
background-color: beige;
}
#button:hover{
background-color: red;
transition: 2s;
}
#input p:nth-child(1){
width: 50px;
display: inline-block;
color: cyan;
opacity: 0.5;
}
#input p:nth-child(2){
width: 50px;
display: inline-block;
color: cyan;
opacity: 0.5;
}
</style>
<body>
<div id="container">
<input type="text" id="num2" placeholder="请输入你猜测的数字" />
<a id="hr">吃一个老八蜜汁小汉堡</a>
<button type="button" id="button">Try</button>
<span id="input">
当前输入:
<p></p>
</span>
</div>
</body>
</html>
<script type="text/javascript">
function random(min,max){
return parseInt(Math.random()*(max-min)+min);
}
let num1 = random(1,100);
let numbers = 6;
$("#button").click(function(){
let num2 = $("#num2").val();
$("#input p").html(num2)
console.log(num1,num2);
if(num1 < num2){
alert("你输入的数字过大");
alert("剩余次数:"+numbers);
numbers -=1;
}
else if(num1 > num2){
alert("你输入的数字过小");
alert("剩余次数:"+numbers);
numbers -=1;
}
if(numbers == 0){
$("#input p:nth-child(2)").html(num1)
alert("即将刷新")
window.location.reload("index.html");
}
if(numbers == 3){
$("a").css({
"display":"block",
"color":"black",
"fontSize":12
})
}
$("#hr").click(function(){
numbers= 6;
alert("当前生命为"+numbers)
})
})
</script>
在线查看
|