看你需要猜幾次才能猜到那個正確的數字！
效果圖：
代碼如下：
<!DOCTYPE html><html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>猜數字游戲</title> <script type="text/javascript" charset="utf-8"> window.onload = newgame; //頁面載入的時候就開始一個新的游戲 window.onpopstate = popState; //處理歷史記錄相關事件 var state, ui; //全局變量，在newgame()方法中會對其初始化 function newgame(playagain) { ui = { heading: null, //文檔最上面的<h1>元素 prompt: null, //要求用戶輸入一個猜測數字 input: null, //用戶輸入猜測數字的地方 low: null, //可視化的三個表格單元格 mid: null, //猜測的數字范圍 high: null, }; //查詢這些元素中每個元素的id for(var id in ui) ui[id] = document.getElementById(id); //給input字段定義一個事件處理程序函數 ui.input.onchange = handleGuess; //生成一個隨機的數字并初始化游戲狀態 state = { n: Math.floor(99 * Math.random())+1, //整數： 0 < n <100 low: 0, //可猜數字范圍下限 high: 100, //可猜數字范圍上限 guessnum: 0, //猜測的次數 guess: undefined //最后一次猜測 }; //修改文檔內容來顯示該初始狀態 display(state); if (playagain === true)save(state); } function save(state) { if (!history.pushState) return; //如果pushState()方法沒有定義，則什么也不做 //將一個保存的狀態和url關聯起來 var url = "#guess" + state.guessnum; history.pushState(state, //要保存的狀態對象 "", //狀態標題：當前瀏覽器會忽視它 url); //狀態URL：對書簽是沒有用的 } //這是onpopstate的事件處理程序，用于恢復歷史狀態 function popState(event) { if (event.state) { //如果事件有一個狀態對象，則恢復該狀態 state = event.state; //恢復歷史狀態 display(state); //顯示恢復的狀態 }else{ history.replaceState(state, "", "#guess" + state.guessnum); } }; //每次猜測一個數字的時候，都會調用此事件處理程序 //此處理程序用于更新游戲的狀態、保存游戲狀態并顯示游戲狀態 function handleGuess() { //從input字段中獲取用戶猜測的數字 var g = parseInt(this.value); //如果該值是限定范圍中的一個數字 if ((g > state.low) && (g < state.high)) { //對應的更新狀態 if (g < state.n) state.low =g; else if (g > state.n) state.high = g; state.guess = g; state.guessnum++; //在瀏覽器歷史記錄中保存新的狀態 save(state); //根據用戶猜測情況來修改文檔 display(state); }else{ //無效的猜測：不保存狀態 alert("請輸入大于" + state.low + "和小于" + state.high); } } //修改文檔來顯示游戲當前狀態 function display(state) { //顯示文檔的導航和標題 ui.heading.innerHTML = document.title ="我在想一個" + state.low + "到" + state.high + "之間的數字！"; //使用一個表格來顯示數字的取值范圍 ui.low.style.width = state.low + "%"; ui.mid.style.width = (state.high-state.low) + "%"; ui.high.style.width = (100-state.high) + "%"; //確保input字段是可見的、空的并且是聚焦的 ui.input.style.visibility = "visible"; ui.input.value = ""; ui.input.focus(); //根據用戶最近猜測，設置提示 if (state.guess === undefined) ui.prompt.innerHTML = "輸入你的猜測："; else if (state.guess < state.n) ui.prompt.innerHTML = state.guess + "低了，再猜一次："; else if (state.guess > state.n) ui.prompt.innerHTML = state.guess + "高了，再猜一次："; else { //當猜對了的時候，就隱藏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> <h1 id="heading">我在想一個數字...</h1> <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>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
