Web实现猜数字游戏：JavaScript DOM基础与实例教程

2024-06-05 9429阅读

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

  • 🤖 洛可可白：个人主页

  • 🔥 个人专栏：✅前端技术 ✅后端技术

  • 🏠 个人博客：洛可可白博客

  • 🐱 代码获取：bestwishes0203

  • 📷 封面壁纸：洛可可白wallpaper

    Web实现猜数字游戏：JavaScript DOM基础与实例教程 第1张

    文章目录

    • Web实现猜数字游戏：JavaScript DOM基础与实例教程
      • JavaScript DOM基础
      • 体验地址
      • 实例：猜数字游戏
        • 创建HTML结构
        • 美化样式
        • 编写JavaScript逻辑
          • 初始化游戏
          • 获取页面元素
          • 处理提交事件
          • 处理再玩一次事件
          • 全部代码
          • 结语
          • 🎉 往期精彩回顾

            Web实现猜数字游戏：JavaScript DOM基础与实例教程

            猜数字游戏是一个简单而经典的游戏，玩家需要猜测由系统随机生成的一个数字。在本教程中，我们将学习如何使用JavaScript和DOM来实现这个网页版的猜数字游戏，并介绍相关的JavaScript DOM基础知识。

            JavaScript DOM基础

            DOM（Document Object Model）是HTML文档的编程接口，它允许我们通过JavaScript访问和操作网页的元素。在JavaScript中，我们可以使用DOM API来选取元素、更改内容、绑定事件等。

            体验地址

            http://8.210.131.139/GuessNumber.html

            Web实现猜数字游戏：JavaScript DOM基础与实例教程 第2张

            实例：猜数字游戏

            创建HTML结构

            首先，我们需要创建一个包含游戏输入区域、结果显示和再玩一次按钮的HTML结构。

            
  
            猜数字游戏
            
  
            
    请猜一个1~100的整数：
    
    提交
  
            
  
            
  
            
  再玩一次

            美化样式

            * {
        font-family: Arial, sans-serif;
        box-sizing: border-box;
      }
      .container {
        margin: 50px auto;
        max-width: 600px;
        text-align: center;
        background-color: #d1d1d1;
        padding: 30px;
        border-radius: 10px;
      }
      h1 {
        font-size: 32px;
        margin-bottom: 20px;
      }
      .input-group {
        margin-bottom: 20px;
      }
      label {
        display: block;
        margin-bottom: 5px;
      }
      input[type="text"] {
        font-size: 18px;
        padding: 5px;
        width: 200px;
        border: 1px solid #ccc;
      }
      button {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
      }
      button:hover {
        background-color: #0062cc;
      }
      .result {
        font-size: 24px;
        margin-bottom: 20px;
      }
      .message {
        font-size: 18px;
        margin-bottom: 20px;
      }
      .play-again {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
        margin: 0 auto;
      }
      .play-again:hover {
        background-color: #0062cc;
      }

            编写JavaScript逻辑

            初始化游戏

            在JavaScript中，我们首先定义一个变量来存储随机生成的答案。

            var answer = Math.floor(Math.random() * 100) + 1;
            获取页面元素

            使用document.getElementById和document.querySelector来获取页面上的元素。

            var input = document.getElementById("guess");
var submitBtn = document.getElementById("submit");
var result = document.querySelector(".result");
var message = document.querySelector(".message");
var playAgainBtn = document.getElementById("play-again");
            处理提交事件

            为提交按钮绑定点击事件，获取用户输入的数字，并与答案比较。

            submitBtn.addEventListener("click", function () {
  var guess = parseInt(input.value);
  if (isNaN(guess) || guess  100) {
    result.textContent = "";
    message.textContent = "请输入1~100之间的整数！";
  } else {
    if (guess === answer) {
      result.textContent = "恭喜你，猜对了！";
      message.textContent = "";
      playAgainBtn.style.display = "block";
      submitBtn.disabled = true;
    } else {
      result.textContent = "";
      if (guess  

            处理再玩一次事件
             

            为再玩一次按钮绑定点击事件，重置游戏状态并允许用户重新开始游戏。
             

            playAgainBtn.addEventListener("click", function () {
  answer = Math.floor(Math.random() * 100) + 1;
  input.value = "";
  result.textContent = "";
  message.textContent = "";
  playAgainBtn.style.display = "none";
  submitBtn.disabled = false;
});

             

            全部代码
             

            
  
    
    
    
    洛可可白😁猜数字
    
      * {
        font-family: Arial, sans-serif;
        box-sizing: border-box;
      }
      .container {
        margin: 50px auto;
        max-width: 600px;
        text-align: center;
        background-color: #d1d1d1;
        padding: 30px;
        border-radius: 10px;
      }
      h1 {
        font-size: 32px;
        margin-bottom: 20px;
      }
      .input-group {
        margin-bottom: 20px;
      }
      label {
        display: block;
        margin-bottom: 5px;
      }
      input[type="text"] {
        font-size: 18px;
        padding: 5px;
        width: 200px;
        border: 1px solid #ccc;
      }
      button {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
      }
      button:hover {
        background-color: #0062cc;
      }
      .result {
        font-size: 24px;
        margin-bottom: 20px;
      }
      .message {
        font-size: 18px;
        margin-bottom: 20px;
      }
      .play-again {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
        margin: 0 auto;
      }
      .play-again:hover {
        background-color: #0062cc;
      }
    
  
  
    
            
      
            猜数字游戏
            
      
            
        请猜一个1~100的整数：
        
        提交
      
            
      
            
      
            
      
        再玩一次
      
    
            
    
      // 生成随机数（1~100之间）
      var answer = Math.floor(Math.random() * 100) + 1;
      // 获取页面元素
      var input = document.getElementById("guess");
      var submitBtn = document.getElementById("submit");
      var result = document.querySelector(".result");
      var message = document.querySelector(".message");
      var playAgainBtn = document.getElementById("play-again");
      // 处理提交事件
      submitBtn.addEventListener("click", function () {
        // 获取用户输入的数字
        var guess = parseInt(input.value);
        // 验证用户输入的数字是否合法
        if (isNaN(guess) || guess  100) {
          result.textContent = "";
          message.textContent = "请输入1~100之间的整数！";
          return;
        }
        // 比较用户输入的数字和答案
        if (guess === answer) {
          result.textContent = "恭喜你，猜对了！";
          message.textContent = "";
          playAgainBtn.style.display = "block";
          submitBtn.disabled = true;
        } else if (guess  

            结语
             

            通过上述步骤，我们实现了一个简单的猜数字游戏。这个实例展示了如何使用JavaScript DOM API来操作HTML元素，并响应用户事件。通过这个项目，你可以更好地理解DOM操作的基本概念和方法，以及如何在实际项目中应用它们。猜数字游戏是一个入门级的编程项目，适合初学者练习和提升编程技能。
             

            如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀
             

            🎉 往期精彩回顾
             
 
 
            Web实现名言生成器：JavaScript DOM基础与实例教程
            • 604阅读 · 16点赞 · 14收藏

              Web实现井字棋游戏：JavaScript DOM基础与实例教程

              • 502阅读 · 20点赞 · 12收藏

                Web实现表格单选全选与反选操作：JavaScript DOM基础与实例教程

                • 772阅读 · 14点赞 · 7收藏

                  H5实现Web ECharts教程：轻松创建动态数据图表

                  • 1123阅读 · 19点赞 · 6收藏

                    浏览器DOM操作基础：禁用右键菜单与阻止文字选中

                    • 1013阅读 · 33点赞 · 24收藏

                      缤纷浏览器 —— 一键换肤，个性随心换（H5实现浏览器换肤效果）

                      • 593阅读 · 10点赞 · 6收藏

                        广州5k前端面试题惊呆我！！！（内容太肝，谨慎入内）

                        • 824阅读 · 29点赞 · 24收藏

                          计算机专业学生的成长之路：超越课堂的自我提升策略

                          • 850阅读 · 33点赞 · 26收藏

                            Node.js快速入门：搭建基础Web服务器与实现CRUD及登录功能

                            • 910阅读 · 31点赞 · 16收藏

                              Node.js核心命令与工具：提升开发效率的实用指南

                              • 748阅读 · 11点赞 · 18收藏

                                爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析

                                • 1301阅读 · 25点赞 · 30收藏

相关阅读：

1、VPS使用指南，必备注意事项与操作技巧全解析

2、VPS一键关机，轻松操作，便捷掌控

3、FX VPS视频教程详解，轻松打造高效虚拟专用服务器！

4、寻找顶尖VPS配置，高性能服务器托管，你的最佳选择

5、低延迟VPS大比拼，速度至上，哪家国内服务商更优秀？

    高速稳定云服务器25元起
    免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

    相关阅读

    目录[+]