猜数字小游戏(网页版)
目錄
🍊一. 游戲簡介
🍈二. 頁面預覽
🥭三. 頁面實現
🍋四. 功能實現
🥝五. 參考源碼?
🍊一. 游戲簡介
在輸入框內輸一個數字,點擊后面的“猜”按鈕,系統會根據你猜的數字的大小,返回你是猜大猜小還是猜正確,系統還會統計你猜的次數,在猜數字的途中你點擊按鈕隨時可以重新開始游戲
🍈二. 頁面預覽
因為是簡易版,所以沒有太多的樣式
👁??🗨?猜數字之前:?
👁??🗨?猜小了:
👁??🗨?猜大了:
👁??🗨?猜對了:
🥭三. 頁面實現
👁??🗨?頁面框架:
<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基本框架之基本思路