猜数字小游戏（网页版）
目錄
🍊一. 游戲簡介
🍈二. 頁面預(yù)覽
🥭三. 頁面實(shí)現(xiàn)
🍋四. 功能實(shí)現(xiàn)
🥝五. 參考源碼?
🍊一. 游戲簡介
在輸入框內(nèi)輸一個數(shù)字，點(diǎn)擊后面的“猜”按鈕，系統(tǒng)會根據(jù)你猜的數(shù)字的大小，返回你是猜大猜小還是猜正確，系統(tǒng)還會統(tǒng)計你猜的次數(shù)，在猜數(shù)字的途中你點(diǎn)擊按鈕隨時可以重新開始游戲
🍈二. 頁面預(yù)覽
因?yàn)槭呛喴装?#xff0c;所以沒有太多的樣式
👁??🗨?猜數(shù)字之前：?
👁??🗨?猜小了：
👁??🗨?猜大了：
👁??🗨?猜對了：
🥭三. 頁面實(shí)現(xiàn)
👁??🗨?頁面框架：
<body><div id="i1"><span>請輸入您猜的數(shù)字：</span><input type="text" id="text"><input type="button" value="猜" id="guess"><br><span>您已經(jīng)猜的次數(shù)：</span><span id="count">0</span><br>結(jié)果：<span class="c1"></span><br><br><input type="button" value="重新開始游戲" id="reBu"></div> </body>👁??🗨?頁面簡單樣式：
<style>#i1 {box-sizing: border-box;width: 400px;height: 300px;border-style: dashed;border-color:blue;padding: 85px;margin-top: 150px;margin-left: 500px;}</style>🍋四. 功能實(shí)現(xiàn)
使用document.querySelector()獲取頁面上的元素：
var text = document.querySelector("#text");//獲取輸入元素var count = document.querySelector("#count");//獲取次數(shù)元素var result = document.querySelector(".c1");//獲取結(jié)果元素var guessBu = document.querySelector("#guess");//獲取“猜”按鈕元素var reBu = document.querySelector("#reBu");//獲取“重新開始”按鈕元素var sum = 0;//猜的總次數(shù)👁??🗨?生成隨機(jī)數(shù)：?
var guessNumber = Math.floor(Math.random()*100)+1;//生成隨機(jī)數(shù)說明：Math.random()隨機(jī)生成[0,1)的數(shù)字，乘上100范圍為[0,100)，加上1，范圍為[1,101)，使用Math.floor()去掉小數(shù)部分，最后生成數(shù)字的范圍為[0,100]
👁??🗨?給“猜”按鈕綁定點(diǎn)擊事件：
🍁點(diǎn)擊按鈕后，啟動比較功能
🍁首先將猜的總次數(shù)sum++，并將sum設(shè)置到頁面中
🍁需要先用parseInt()將輸入框的內(nèi)容轉(zhuǎn)為整數(shù)，再進(jìn)行比較
🍁若輸入的數(shù)大，則將提示顏色調(diào)整為紅色，并設(shè)置到頁面中
🍁若輸入的數(shù)小，則將提示顏色調(diào)整為紅色，并設(shè)置到頁面中
🍁若輸入的數(shù)為系統(tǒng)生成的隨機(jī)數(shù)，則將提示信息調(diào)整為綠色，并設(shè)置到頁面中
👁??🗨?給“重新開始游戲”按鈕綁定點(diǎn)擊事件：
🍂首先重新生成隨機(jī)數(shù)
🍂再將猜測的總次數(shù)置0，并設(shè)置到頁面中
🍂再將提示信息置空，并設(shè)置到頁面中
🍂最后將輸入框數(shù)字置空，并設(shè)置到頁面中
🥝五. 參考源碼?
拿來即可在自己電腦上運(yùn)行，大家快來試試吧！
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猜數(shù)字游戲！！！</title><style>#i1 {box-sizing: border-box;width: 400px;height: 300px;border-style: dashed;border-color:blue;padding: 85px;margin-top: 150px;margin-left: 500px;}</style> </head> <body><div id="i1"><span>請輸入您猜的數(shù)字：</span><input type="text" id="text"><input type="button" value="猜" id="guess"><br><span>您已經(jīng)猜的次數(shù)：</span><span id="count">0</span><br>結(jié)果：<span class="c1"></span><br><br><input type="button" value="重新開始游戲" id="reBu"></div> </body> <script>var text = document.querySelector("#text");//獲取輸入元素var count = document.querySelector("#count");//獲取次數(shù)元素var result = document.querySelector(".c1");//獲取結(jié)果元素var guessBu = document.querySelector("#guess");//獲取“猜”按鈕元素var reBu = document.querySelector("#reBu");//獲取“重新開始”按鈕元素var guessNumber = Math.floor(Math.random()*100)+1;//生成隨機(jī)數(shù)var sum = 0;//猜的總次數(shù)guessBu.onclick = function(){ //給“猜”按鈕綁定點(diǎn)擊功能sum++;count.innerHTML = sum;var userGuess = parseInt(text.value);//獲取輸入的數(shù)字if(userGuess > guessNumber){ //如果輸入大于系統(tǒng)生成數(shù)字result.innerHTML = "很遺憾，您猜大了！";result.style.color = "red"; //調(diào)正顏色為紅色}else if(userGuess < guessNumber){//如果輸入小于系統(tǒng)生成數(shù)字result.innerHTML = "很遺憾，您猜小了！";result.style.color = "red";}else { //輸入等于系統(tǒng)生成數(shù)字result.className = "c2";result.innerHTML = "恭喜您，您猜對了！";result.style.color = "green";//調(diào)整顏色為綠色}}reBu.onclick = function(){//給“重新開始”按鈕綁定點(diǎn)擊事件guessNumber = Math.floor(Math.random()*100)+1;//重新生成隨機(jī)數(shù)sum = 0;//猜的總次數(shù)置0count.innerHTML = sum;//將0填充result.innerHTML = "";//結(jié)果置空text.value = "";//輸入框置空} </script> </html>總結(jié)
以上是生活随笔為你收集整理的猜数字小游戏（网页版）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 科研ABC - SCI论文写作
- 下一篇： 项目一：SORM基本框架之基本思路