案例解析

• 猜数字游戏
• 猜数字游戏2

案例解析

• 熟悉JS简单案例流程
• 巩固JS语言基础

知识链接

• 获取元素方式
• 事件处理流程
• HTML元素操作

获取元素方式

• document.querySelector
• document.querySelectorAll
  • 这两个方法都支持复杂的CSS选择器
• document.getElementById
• document.getElementsByName
• document.getElementsByClassName
• document.getElementsByTagName

事件处理流程

• 绑定事件
  • onclick属性
  • addEventListener

HTML元素操作

• 修改元素的内容
  • oInfo.innerHTML+="这次猜的"+numTemp+",有点偏大<br>";
• 修改元素的样式
  • oGuess.style.display="none";
• 修改元素的属性
  • oNum.disabled=true;
  • oNum.setAttribute('placeholder',"0-"+numRange+"整数，"+guessTimes+"次机会");

步骤讲解

• HTML
  • 容器
  • 输入框、按钮
  • 输出区域
• CSS
  • 样式
  • 布局
• JS
  • 获取元素
  • 游戏的初始化（随机数生成、猜测次数、绑定事件）
  • 猜测逻辑
  • 游戏的结束操作
  • 游戏的重玩操作

案例练习

猜数字游戏