码迷,mamicode.com
首页 > Web开发 > 详细

js 学习一 猜数字游戏

时间:2019-01-16 13:54:07      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:知识   按钮   dom   sans   随机数   body   document   UNC   floor   

知识点

  1. js 操作元素 增 (document.createElement(),document.body.appendChild()),
    删(parentNode.removeChild()) ,改(guessField.disabled = false;) 查(document.querySelector(‘.lastResult‘))
  2. if 判断语句 for 循环语句
  3. js 方法 自定义方法 用js方法(Math.floor()Math.random())
  4. 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 学习一 猜数字游戏

标签:知识   按钮   dom   sans   随机数   body   document   UNC   floor   

原文地址:https://www.cnblogs.com/wentutu/p/10275766.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!