知识点

  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 学习一 猜数字游戏的更多相关文章

  1. python学习：猜数字游戏

    猜数字游戏   系统生成一个100以内的随机整数, 玩家有6次机会进行猜猜看,每次猜测都有反馈(猜大了,猜小了,猜对了-结束) 6次中,猜对了,玩家赢了. 否则系统赢了   #!/usr/bin/en ...

  2. jQuery学习（1）猜数字游戏

      jQuery是一个快捷.小型且特征丰富的JavaScript库.它使得HTML文档遍历及操作,事件处理,动画,Ajax等更简洁方便.它通过调用一个简单易用的API,就能在各种浏览器中使用.由于jQ ...

  3. Python3基础学习-while循环实例- 猜数字游戏

    需求: 猜数字游戏, 要求如下: 给个数字, 比如是66. 让用户一直猜,直到猜对退出. 中间输入q或Q也能退出 如果猜大了,提示用户猜小一点; 如果猜小了,提示用户猜大一点; likely = 66 ...

  4. 【原创Android游戏】--猜数字游戏V1.1 --数据存储，Intent，SimpleAdapter的学习与应用

    --------------------------------------------------------------- V0.1版本 上次做完第一个版本后,发现还有一些漏洞,并且还有一些可以添 ...

  5. python学习笔记 ——python写的猜数字游戏 002

    from sys import exit import random def Arrfor(str): #CONTST = CONTST + 1 artificial = input("请输 ...

  6. 【原创Android游戏】--猜数字游戏Version 0.1

    想当年高中时经常和小伙伴在纸上或者黑板上或者学习机上玩猜数字的游戏,在当年那个手机等娱乐设备在我们那还不是很普遍的时候是很好的一个消遣的游戏,去年的时候便写了一个Android版的猜数字游戏,只是当时 ...

  7. 用MFC完成一个简单的猜数字游戏: 输入的四位数中，位置和数字都正确为A，数字相同而位置不同的为B。

    最近学习了MFC一些比较基础的知识,所以打算通过做一个简单的数字游戏来理解MFC的流程并进一步熟悉其操作. 在这里,我做了一个猜数字的小游戏.第一步当然是设计主界面,先给大家展示一下游戏界面: 主界面 ...

  8. python猜数字游戏console版本

    加入python学习小组后的第一次作业,python GUI写猜数字游戏.由于加班比较多,第一步先实现console版本,下一步再实现GUI版本. 虽然猜数字游戏是个小游戏,但是涉及到的基础知识点还是 ...

  9. 实验三 Java猜数字游戏开发

    课程:Java实验   班级:201352     姓名:程涵  学号:20135210 成绩:             指导教师:娄佳鹏   实验日期:15.06.03 实验密级:         ...

随机推荐

  1. mongo 是什么

    一.概述1.MongoDB是什么?用一句话总结MongoDB是一款为web应用程序和互联网基础设施设计的数据库管理系统.没错MongoDB就是数据库,是NoSQL类型的数据库 2.为什么要使用Mong ...

  2. 泛型中的<Object>并不是像以前那样有继承关系的，也就是说List<Object>和List<String>是毫无关系的

    泛型中的<Object>并不是像以前那样有继承关系的,也就是说List<Object>和List<String>是毫无关系的

  3. C++入门经典-例2.14-使用移位运算

    1:代码如下: // 2.14.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...

  4. 使用layui异步请求上传图片在tp5.1环境下出现“请对上传接口返回json”的错误的解决方法

    正常情况下返回json数据使用return json(); 但是使用layui会报错,然后想到了使用json_encode()包装一下用一个变量接收后,再使用return();返回接收json格式的变 ...

  5. Entity Framework Code First使用者的福音 --- EF Power Tool使用记之一

    下次会为大家深入解析这个小工具.  最先看到这个工具是在EF产品组最新的博客文章上,http://blogs.msdn.com/b/adonet/archive/2011/05/18/ef-power ...

  6. javascript - 事件详解（阻止事件冒泡+阻止事件行为）

    一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...

  7. Javadoc常见的标记和含义

    1.@param 方法参数的说明 2.@return 对 方法返回值的说明 3.@throws 方法抛出异常的描述 4.@version模块的版本号 5.see参数转向 6.@deprecated标记 ...

  8. Apache Kafka系列(六)客制化Serializer和Deserializer

    已经迁移,请移步:http://www.itrensheng.com/archives/apache-kafka-repartition

  9. 阶段3 2.Spring_06.Spring的新注解_8 spring整合junit完成

    Junit的核心Runner在执行的时候不会创建容器.同时它字节码文件,也改不了 spring整合junit 想办法把junit里面的不能加载容器的main方法换掉.从而实现创建容器.有了容器就可以实 ...

  10. JavaScript基础修炼(14)

    目录 一. PCM格式是什么 二. 浏览器中的音频采集处理 三. 需求实现 方案1——服务端FFmpeg实现编码 方案2——ScriptProcessorNode手动处理数据流 参考文献 示例代码托管 ...