js 學習一 猜數字遊戲
阿新 • • 發佈：2019-01-16
val user 數字 mar math submit rem for listener
知識點
- js 操作元素 增 (document.createElement(),document.body.appendChild())，
刪(parentNode.removeChild()) ，改(guessField.disabled = false;) 查（document.querySelector(‘.lastResult‘)） - if 判斷語句 for 循環語句
- js 方法 自定義方法 用js方法（Math.floor(）Math.random()）
- js 操作css
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>猜數字遊戲</title> <style> html { font-family: sans-serif } body { width: 50%; max-width: 800px; min-width: 480px; margin: 0 auto } .lastResult { color: white; padding: 3px } </style> </head> <body> <h1>猜數字遊戲</h1> <p>我剛才隨機選定了一個100以內的自然數。看你能否在 10 次以內猜中它。每次我都會告訴你所猜的結果是高了還是低了。</p> <div class="form"> <label for="guessField">請猜數: </label> <input type="text" id="guessField" class="guessField"> <input type="submit" value="確定" class="guessSubmit"> </div> <div class="resultParas"> <p class="guesses"></p> <p class="lastResult"></p> <p class="lowOrHi"></p> </div> <script> var randomNumber =Math.floor(Math.random()*100)+1; var guesses = document.querySelector('.guesses'); var lastResult= document.querySelector('.lastResult'); var lowOrHi= document.querySelector('.lowOrHi'); var guessSubmit = document.querySelector('.guessSubmit'); var guessField = document.querySelector('.guessField'); var guessCount = 1; var resetButton; guessField.focus(); guessSubmit.addEventListener('click', checkGuess); function checkGuess(){ //獲取輸入框的值 var userGuess = Number(guessField.value); if (guessCount === 1) { guesses.textContent = '上次猜的數：'; } guesses.textContent += userGuess + ' '; if(userGuess === randomNumber){ lastResult.textContent ='恭喜你！猜對了'; lastResult.style.backgroundColor ='green'; lowOrHi.textContent = ''; } else if(guessCount === 10){ lastResult.textContent = '!!! GAME OVER !!! '; setGameOver(); } else{ lastResult.textContent ='你猜錯了！'; lastResult.style.backgroundColor ='red'; if(userGuess<randomNumber){ lowOrHi.textContent ='你猜低了！' }else if(userGuess>randomNumber){ lowOrHi.textContent ='你猜高了'; } } guessCount++; guessField.value=''; guessField.focus(); } function setGameOver(){//遊戲結束 //禁止輸入和提交 guessField.disabled =true; guessSubmit.disabled =true; // 添加開始新遊戲按鈕 在html的底部 resetButton = document.createElement('button'); resetButton.textContent ='開始新遊戲'; document.body.appendChild(resetButton); // 在開始新遊戲 設置了一個事件監聽器 resetGame() resetButton.addEventListener('click',resetGame); } function resetGame(){//重新開始遊戲 //重置數據 guessCount =1; //將 class='resultParas' 下面的p元素的內容清空 var resetParas = document.querySelectorAll('.resultParas p'); for (var i = 0;i<resetParas.length;i++){ resetParas[i].textContent = ''; } //移除 resetButton按鈕 resetButton.parentNode.removeChild(resetButton); //啟用表單元素，清空文本域並聚焦於此，準備接受新猜測的數字。 guessField.disabled = false; guessSubmit.disabled = false; guessField.value = ''; guessField.focus(); //刪除lastResult段落的背景顏色。 lastResult.style.backgroundColor = 'white'; //生成一個新的隨機數！ randomNumber = Math.floor(Math.random() * 100) + 1; } </script> </body> </html>
本文學習案列來自：MDN web docs
js 學習一 猜數字遊戲