js猜數字小遊戲——原創
今天講迴圈到猜數字案例，我結合dom操作，寫了一個猜數字的小遊戲，感興趣的可以看下：
<!doctype html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>猜數字</title>
<style>
body{
color:red;
background-color:#ddd;
font-size:50px;
}
input{
width:200px;
height:30px
}
button{
width:100px;
height:30px;
background-color:#678;
}
p{
text-align:center;
}
</style>
</head>
<body>
<p id="c">猜測隨機生成的數字！</p>
數字範圍(最大值)：
<input type="text" id="a" >
<p><button type="button" id="su" onClick="num()">開始遊戲</button></p>
<script>
var step=0;
var times=0;
var end=0;
function setTime(){
var Time=setInterval(function(){
++times;
console.log(times);
if (end)
{
window.clearInterval(Time);
}
},1000)
}
setTime()
function num(){
var range=document.getElementById("a").value;
var num=Math.ceil(Math.random()*range);
var c=document.getElementById("c");
c.innerHTML="猜測隨機生成的數字！";
//document.getElementById("a").value="";
step=0;
//times=0;
end=false;
if (confirm("是否開始猜數字遊戲！"))
{
console.log(num)
while(true){
++step;
var my_num=prompt(`請輸入0~${range}之間的數字！`)
if (my_num>num)
{
alert("太大了！");
}
if(my_num<num)
{
alert("太小了！");
}
if(my_num==num)
{
end=true;
c.innerHTML=`
正確數字是：${my_num};<br>
共猜測：${step}次;<br>
用時：${times}秒;<br>
分數：${100-step*5-times}分;
`;
//c.innerHTML="正確數字是："+my_num+"<br>"+",用時："+times+"秒,共猜測"+step+"次！";
console.log(my_num,times,step)
times=0;
setTime();
break;
}
}
}
}
</script>
</body>
</html>