js 学习一 猜数字游戏

知识点

  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

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

时间: 2024-11-05 11:54:15

js 学习一 猜数字游戏的相关文章

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

需求: 猜数字游戏, 要求如下: 给个数字, 比如是66. 让用户一直猜,直到猜对退出. 中间输入q或Q也能退出 如果猜大了,提示用户猜小一点; 如果猜小了,提示用户猜大一点; likely = 66 while True: guest_num = input("请输入你猜测的数字[q|Q退出]: ") if guest_num.upper() == "Q": break elif int(guest_num) > likely: print("你猜

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

--------------------------------------------------------------- V0.1版本 上次做完第一个版本后,发现还有一些漏洞,并且还有一些可以添加的功能,以及一些可改进的地方,于是准备继续完善此游戏,顺便学Android了. 本次更新信息如下: 1.改正了随机数生成算法,更正了不能产生数字'9'的bug 2.增加了数据存储与IO的内容,使用了SharedPreferences保存数据 3.保存数据为: 总盘数,猜中的盘数 4.使用了Simp

[Lua学习]猜数字游戏

1 --设置随机数种子 2 math.randomseed(os.time()) 3 math.random() 4 5 print("猜数字游戏(0-100)") 6 7 local limit = 6 8 local answer = math.random(0,100) 9 10 while true do 11 print("剩余 " .. limit .. " 次机会:") 12 local guess = io.read("

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

from sys import exit import random def Arrfor(str): #CONTST = CONTST + 1 artificial = input("请输入1-9之间任意一个数字:") art = int(artificial) #将字符串类型转换为int类型 if art < 1: print("数值不合法!还有",CONTST + "次机会哦") Arrfor(str); if art > 9:

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

最近学习了MFC一些比较基础的知识,所以打算通过做一个简单的数字游戏来理解MFC的流程并进一步熟悉其操作. 在这里,我做了一个猜数字的小游戏.第一步当然是设计主界面,先给大家展示一下游戏界面: 主界面: 从这个主界面可以看到,它包含标题,菜单栏,工具栏. 标题是给人一个认识,这是什么游戏,标题设置为:“猜数游戏”: 而菜单栏和工具栏才是游戏的核心,它要保证能够完成游戏的基本功能. 菜单栏和工具栏是对应的,包含了”start“,"help","restart"这三个菜

实验三 Java猜数字游戏开发

课程:Java实验   班级:201352     姓名:程涵  学号:20135210 成绩:             指导教师:娄佳鹏   实验日期:15.06.03 实验密级:         预习程度:             实验时间: 仪器组次:          必修/选修:选修          实验序号:3 实验名称:     Java猜数字游戏开发 (姬梦馨.程涵小组) 一.实验目的与要求: 通过编写Java的应用系统综合实例——猜数字游戏,总结.回顾和实践面向对象的编程思想

vue猜数字游戏

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>vue组件猜数字游戏</title> <script src="js/vue.js"></script> </head> <body> <div id="container"> <p>{

JavaScript一个猜数字游戏

效果图: 代码: <body> <script type="text/javascript"> window.onload = newgame; //页面载入的时候就开始一个新的游戏 window.onpopstate = popState; //处理历史记录相关事件 var state,ui; //全局变量,在newgame()方法中会对其初始化 function newgame( playagin ){ //开始一个新的猜数字游戏 //初始化一个包含需要的文

猜数字游戏及rand()函数

#include<stdio.h>#include<stdlib.h>int main() { short number; short guess=0; number=rand()%100; number++; printf("猜数字游戏\n"); printf("该数字在1到100之间\n"); while(guess!=number) { printf("请你输入所猜数字:"); scanf("%hd&quo