用html+css+js写出猜数字小游戏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width: 100%;
min-height: 600px;
text-align: center;
}
.one{
width: 100%;
height: 180px;
padding-top: 30px;
background: linear-gradient(to right ,cyan,darkcyan);
}
.two{
width: 100%;
height: 240px;
padding-top: 30px;
background: linear-gradient(to right ,aquamarine,#00FF84);
}
#num_one{
outline: none;/*去除input输入框外边的线条*/
border-radius:20px 20px 20px 20px;
}
.three{
width: 100%;
height:210px;
padding-top: 40px;
background: linear-gradient(to right ,lime,mediumspringgreen);
}
input{
width: 154px;
height: 39px;
}
button{
height: 36px;
width: 75px;
color: #FFFFFF;
font-size: 15px;
border-radius:10px 10px 10px 10px;
background-color: darkslategray;
outline:none;
}
#result{
color:red;
}
.three p{
font-size: 20px;
}
#right{
color: #000000;
}
</style>
<body>
<div id="" class="container">
<div class="one" >
<h1>欢迎登录数字猜猜乐</h1><br>
<p>
<b>规则介绍：</b><br>
<b style="font-weight: 600;color: #E00003;">系统随机生成一个0~100以内的数</b><br>
<b> 请输入您猜的数，您共有8次机会</b><br>
</p>
</div>
<div class="two">
<h3>请在下面输入您决定的数字：</h3>
<br>
<form id="two_one">
<input type="number" name="num_one" id="num_one">
<button type="button" id="submitbox" onclick="sub()">提交</button>
<button type="button" id="submitbox" onclick="check()">查看</button>
</form>
<br />
<br />
<p>正确答案：<span id="right"></span></p>
</div>
<div class="three">
<p>您输入的数：<span id="result"></span></p>
<p><br />当前剩余次数为：<span id="coun"></span>次</p>
</div>
</div>
<script>
var randomNum = parseInt(Math.random()*100);
var count =0;
document.getElementById("coun").innerHTML=8;
function sub(){
var num1 = document.getElementById("num_one");
var num2= Number(num1.value);
if(count<=8){//次数
if(randomNum>num2){
count++;
document.getElementById("result").innerHTML="偏小";
document.getElementById("coun").innerHTML=8-count;
}else if(randomNum<num2){
count++;
document.getElementById("result").innerHTML="偏大";
document.getElementById("coun").innerHTML=8-count;
}else {
count++;
document.getElementById("result").innerHTML="输入正确";
document.getElementById("coun").innerHTML=8-count;
}
}else{
alert("游戏结束，请重新开始");
}
}
function check(){
document.getElementById("right").innerHTML=randomNum;
}
</script>
</body>
</html>
效果图
代码
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>猜数字游戏</title>
</head>
<script>
var ran = parseInt(Math.random()*100);
function guess() {
var number = document.getElementById("number").value;
if (number < 0 || number > 100) {
alert("请您输入1到100的整数");
} else if (ran == number) {
alert("恭喜您猜对了，您猜的数字是" + ran + "， 如果要继续游戏请重新刷新页面");
} else if (ran > number) {
alert("再试试看吧，你猜小了");
} else if (ran < number) {
alert("哎呀就差一点点了，你猜大了");
}
}
</script>
<body>
请输入1到100的整数：<br />
<p><input type="text" name="number" id="number"></p>
<button type="button" onclick="guess()">提交</button>
</body>
</html>