猜数字小游戏（网页版）
生活随笔
收集整理的這篇文章主要介紹了
猜数字小游戏（网页版）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
🍊一. 游戲簡介
🍈二. 頁面預覽
🥭三. 頁面實現
🍋四. 功能實現
🥝五. 參考源碼?
🍊一. 游戲簡介
在輸入框內輸一個數字，點擊后面的“猜”按鈕，系統會根據你猜的數字的大小，返回你是猜大猜小還是猜正確，系統還會統計你猜的次數，在猜數字的途中你點擊按鈕隨時可以重新開始游戲
🍈二. 頁面預覽
因為是簡易版，所以沒有太多的樣式
👁??🗨?猜數字之前：?
👁??🗨?猜小了：
👁??🗨?猜大了：
👁??🗨?猜對了：
🥭三. 頁面實現
👁??🗨?頁面框架：
<body><div id="i1"><span>請輸入您猜的數字：</span><input type="text" id="text"><input type="button" value="猜" id="guess"><br><span>您已經猜的次數：</span><span id="count">0</span><br>結果：<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>🍋四. 功能實現
使用document.querySelector()獲取頁面上的元素：
var text = document.querySelector("#text");//獲取輸入元素var count = document.querySelector("#count");//獲取次數元素var result = document.querySelector(".c1");//獲取結果元素var guessBu = document.querySelector("#guess");//獲取“猜”按鈕元素var reBu = document.querySelector("#reBu");//獲取“重新開始”按鈕元素var sum = 0;//猜的總次數👁??🗨?生成隨機數：?
var guessNumber = Math.floor(Math.random()*100)+1;//生成隨機數說明：Math.random()隨機生成[0,1)的數字，乘上100范圍為[0,100)，加上1，范圍為[1,101)，使用Math.floor()去掉小數部分，最后生成數字的范圍為[0,100]
👁??🗨?給“猜”按鈕綁定點擊事件：
🍁點擊按鈕后，啟動比較功能
🍁首先將猜的總次數sum++，并將sum設置到頁面中
🍁需要先用parseInt()將輸入框的內容轉為整數，再進行比較
🍁若輸入的數大，則將提示顏色調整為紅色，并設置到頁面中
🍁若輸入的數小，則將提示顏色調整為紅色，并設置到頁面中
🍁若輸入的數為系統生成的隨機數，則將提示信息調整為綠色，并設置到頁面中
👁??🗨?給“重新開始游戲”按鈕綁定點擊事件：
🍂首先重新生成隨機數
🍂再將猜測的總次數置0，并設置到頁面中
🍂再將提示信息置空，并設置到頁面中
🍂最后將輸入框數字置空，并設置到頁面中
🥝五. 參考源碼?
拿來即可在自己電腦上運行，大家快來試試吧！
<!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>猜數字游戲！！！</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>請輸入您猜的數字：</span><input type="text" id="text"><input type="button" value="猜" id="guess"><br><span>您已經猜的次數：</span><span id="count">0</span><br>結果：<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");//獲取次數元素var result = document.querySelector(".c1");//獲取結果元素var guessBu = document.querySelector("#guess");//獲取“猜”按鈕元素var reBu = document.querySelector("#reBu");//獲取“重新開始”按鈕元素var guessNumber = Math.floor(Math.random()*100)+1;//生成隨機數var sum = 0;//猜的總次數guessBu.onclick = function(){ //給“猜”按鈕綁定點擊功能sum++;count.innerHTML = sum;var userGuess = parseInt(text.value);//獲取輸入的數字if(userGuess > guessNumber){ //如果輸入大于系統生成數字result.innerHTML = "很遺憾，您猜大了！";result.style.color = "red"; //調正顏色為紅色}else if(userGuess < guessNumber){//如果輸入小于系統生成數字result.innerHTML = "很遺憾，您猜小了！";result.style.color = "red";}else { //輸入等于系統生成數字result.className = "c2";result.innerHTML = "恭喜您，您猜對了！";result.style.color = "green";//調整顏色為綠色}}reBu.onclick = function(){//給“重新開始”按鈕綁定點擊事件guessNumber = Math.floor(Math.random()*100)+1;//重新生成隨機數sum = 0;//猜的總次數置0count.innerHTML = sum;//將0填充result.innerHTML = "";//結果置空text.value = "";//輸入框置空} </script> </html>總結
以上是生活随笔為你收集整理的猜数字小游戏（网页版）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 科研ABC - SCI论文写作
- 下一篇： 项目一：SORM基本框架之基本思路