看你需要猜几次才能猜到那个正确的数字！
效果图：
代码如下：
<!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>再玩一次</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>我在想一个数字...</h1> <table> <tr> <td></td> <td></td> <td></td> </tr> </table> <label></label> <input type="text"> </body> </html>