溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
看你需要猜幾次才能猜到那個(gè)正確的數(shù)字！
效果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>猜數(shù)字游戲</title>
<script type="text/javascript" charset="utf-8">
window.onload = newgame; //頁(yè)面載入的時(shí)候就開(kāi)始一個(gè)新的游戲
window.onpopstate = popState; //處理歷史記錄相關(guān)事件
var state, ui; //全局變量，在newgame()方法中會(huì)對(duì)其初始化
function newgame(playagain) {
ui = {
heading: null, //文檔最上面的<h2>元素
prompt: null, //要求用戶輸入一個(gè)猜測(cè)數(shù)字
input: null, //用戶輸入猜測(cè)數(shù)字的地方
low: null, //可視化的三個(gè)表格單元格
mid: null, //猜測(cè)的數(shù)字范圍
high: null,
};
//查詢這些元素中每個(gè)元素的id
for(var id in ui) ui[id] = document.getElementById(id);
//給input字段定義一個(gè)事件處理程序函數(shù)
ui.input.onchange = handleGuess;
//生成一個(gè)隨機(jī)的數(shù)字并初始化游戲狀態(tài)
state = {
n: Math.floor(99 * Math.random())+1, //整數(shù)： 0 < n <100
low: 0, //可猜數(shù)字范圍下限
high: 100, //可猜數(shù)字范圍上限
guessnum: 0, //猜測(cè)的次數(shù)
guess: undefined //最后一次猜測(cè)
};
//修改文檔內(nèi)容來(lái)顯示該初始狀態(tài)
display(state);
if (playagain === true)save(state);
}
function save(state) {
if (!history.pushState) return; //如果pushState()方法沒(méi)有定義，則什么也不做
//將一個(gè)保存的狀態(tài)和url關(guān)聯(lián)起來(lái)
var url = "#guess" + state.guessnum;
history.pushState(state, //要保存的狀態(tài)對(duì)象
"", //狀態(tài)標(biāo)題：當(dāng)前瀏覽器會(huì)忽視它
url); //狀態(tài)URL：對(duì)書(shū)簽是沒(méi)有用的
}
//這是onpopstate的事件處理程序，用于恢復(fù)歷史狀態(tài)
function popState(event) {
if (event.state) {
//如果事件有一個(gè)狀態(tài)對(duì)象，則恢復(fù)該狀態(tài)
state = event.state; //恢復(fù)歷史狀態(tài)
display(state); //顯示恢復(fù)的狀態(tài)
}else{
history.replaceState(state, "", "#guess" + state.guessnum);
}
};
//每次猜測(cè)一個(gè)數(shù)字的時(shí)候，都會(huì)調(diào)用此事件處理程序
//此處理程序用于更新游戲的狀態(tài)、保存游戲狀態(tài)并顯示游戲狀態(tài)
function handleGuess() {
//從input字段中獲取用戶猜測(cè)的數(shù)字
var g = parseInt(this.value);
//如果該值是限定范圍中的一個(gè)數(shù)字
if ((g > state.low) && (g < state.high)) {
//對(duì)應(yīng)的更新?tīng)顟B(tài)
if (g < state.n) state.low =g;
else if (g > state.n) state.high = g;
state.guess = g;
state.guessnum++;
//在瀏覽器歷史記錄中保存新的狀態(tài)
save(state);
//根據(jù)用戶猜測(cè)情況來(lái)修改文檔
display(state);
}else{
//無(wú)效的猜測(cè)：不保存狀態(tài)
alert("請(qǐng)輸入大于" + state.low + "和小于" + state.high);
}
}
//修改文檔來(lái)顯示游戲當(dāng)前狀態(tài)
function display(state) {
//顯示文檔的導(dǎo)航和標(biāo)題
ui.heading.innerHTML = document.title ="我在想一個(gè)" + state.low + "到" + state.high + "之間的數(shù)字！";
//使用一個(gè)表格來(lái)顯示數(shù)字的取值范圍
ui.low.style.width = state.low + "%";
ui.mid.style.width = (state.high-state.low) + "%";
ui.high.style.width = (100-state.high) + "%";
//確保input字段是可見(jiàn)的、空的并且是聚焦的
ui.input.style.visibility = "visible";
ui.input.value = "";
ui.input.focus();
//根據(jù)用戶最近猜測(cè)，設(shè)置提示
if (state.guess === undefined)
ui.prompt.innerHTML = "輸入你的猜測(cè)：";
else if (state.guess < state.n)
ui.prompt.innerHTML = state.guess + "低了，再猜一次：";
else if (state.guess > state.n)
ui.prompt.innerHTML = state.guess + "高了，再猜一次：";
else {
//當(dāng)猜對(duì)了的時(shí)候，就隱藏input字段并顯示“再玩一次”按鈕
ui.input.style.visibility = "hidden";
ui.heading.innerHTML = document.title = state.guess + "正確！";
ui.prompt.innerHTML = "你贏了 <button onclick='newgame(true)'>再玩一次</button>";
}
}
</script>
<style>
#prompt { font-size: 16pt;}
table { width: 90%; margin:10px; margin-left:5%;}
#low, #high { background-color:lightgray; height:1em; }
#mid { background-color:green;}
</style>
</head>
<body>
<h2 id="heading">我在想一個(gè)數(shù)字...</h2>
<table>
<tr>
<td id="low"></td>
<td id="mid"></td>
<td id="high"></td>
</tr>
</table>
<label id="prompt"></label>
<input id="input" type="text">
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持億速云！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼