首页 > 编程语言 >【Web应用技术基础】JavaScript(1)——案例:猜数字

【Web应用技术基础】JavaScript(1)——案例:猜数字

时间:2024-03-30 22:58:32浏览次数:29  
标签:count Web document JavaScript 案例 innerText querySelector var resultE

因为不能插入视频,所以给大家一张一张截图的

点击“重新开始一局游戏” 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button type="button" id="reset">重新开始一局游戏</button>
<br>
请输入要猜的数字:<input type="text" id="number">
<button type="button" id="button">猜</button>
<br>
已经猜的次数:<span id="count">0</span>
<br>
结果:<span id="result"></span>
</body>
<script>
    var inputE = document.querySelector("#number");
    var countE = document.querySelector("#count");
    var resultE = document.querySelector("#result");
    var btn = document.querySelector("#button");
    var resetBtn = document.querySelector("#reset");
    // 随机生成一个 1-100 的数字
    var guessNumber = Math.floor(Math.random() * 100) + 1
    var count = 0;
    btn.onclick = function() {
        count++;
        countE.innerText = count;
        var userGuess = parseInt(inputE.value);
        if (userGuess == guessNumber) {
            resultE.innerText = "猜对了";
            resultE.style = "color: gray;";
       } else if (userGuess < guessNumber) {
            resultE.innerText = "猜小了";
            resultE.style = "color: blue;";
       } else {
            resultE.innerText = "猜大了";
            resultE.style = "color: red;";
       }
   };
    resetBtn.onclick = function() {
        guessNumber = Math.floor(Math.random() * 100) + 1
        count = 0;
        countE.innerText = count;
        resultE.innerText = "";
        inputE.value = "";
   }
</script>
</html>

 

标签:count,Web,document,JavaScript,案例,innerText,querySelector,var,resultE
From: https://blog.csdn.net/m0_74164458/article/details/137185820

相关文章

  • web复现
    怎么请求来着bp抓包,修改请求方法后放行 查看源代码得到flag爆炸吧小黑子用户名admin,密码123,尝试登录并抓包使用所给字典爆破 找到长度不一样的为密码登录后得到flag 诶? bp抓包,使用X-Forwarded-For伪造IP地址zaiyong 再将浏览器修改为WLGF_Yunxi_604最......
  • (day 24)JavaScript学习笔记(异常的处理)
    概述         这是我的学习笔记,记录了JavaScript的学习过程。在写博客的时候我会尽量详尽的记录每个知识点。如果你完全没接触过JavaScript,那么这一系列的学习笔记可能会对你有所帮助。    今天学习异常的处理,主要是捕获异常、throw关键字主动抛异常、Error......
  • Acunetix v24.3 (Linux, Windows) - Web 应用程序安全测试
    Acunetixv24.3(Linux,Windows)-Web应用程序安全测试Acunetix|WebApplicationSecurityScanner请访问原文链接:https://sysin.org/blog/acunetix/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org重要提示AcunetixPremium现在使用日历化版本命名。请注意,从......
  • 一文搞懂Javaweb的响应状态码
    一、状态码大类状态码分类说明1xx响应中——临时状态码,表示请求已经接受,告诉客户端应该继续请求或者如果它已经完成则忽略它2xx成功——表示请求已经被成功接收,处理已完成3xx重定向——重定向到其它地方:它让客户端再发起一个请求以完成整个处理。4xx客户端......
  • JavaScript笔记 09
    目录01DOM操作事件的体验02获取元素对象的五种方式03事件中this指向问题04循环绑定事件05DOM节点对象的常用操作  06点亮盒子的案例07节点访问关系08设置和获取节点内容的属性09以上内容的小总结 01DOM操作事件的体验        js本身是受......
  • [web]: HTML 测试模板
    [web]: HTML 测试模板    一、HTML 测试模板内容 <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>测试模板</title><scriptsrc="https://code.jquery.com/jquery-3.7.1.min.js"></script&g......
  • AI绘图:Stable Diffusion WEB UI 详细操作介绍:进阶-面部修复和调参
    结合两篇文章完成了本地部署和基础操作,现在我们来介绍下进阶内容:面部修复,高清修复和调参区。一:脸部修复面部修复的适用在画真人、三次元的场景,特别是在画全身的时候一般在画全身,由于脸部占比的空间比较小,那么绘制出来的效果就会比较差1.面部修复SD支持直接一键进行脸部修......
  • 基于JavaWeb的家居商城系统的设计与实现论文
    摘要随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势;对于家居商城系统当然也不能排除在外,随着网络技术的不断成熟,带动了家居商城系统,它彻底改变了过去传统的管理方式,不仅使服务管理难度变低了,还提升了管理的灵活性。这种个性化的平......
  • 【JavaScript系列】-- 对象
    今天我们将探讨JavaScript中的一个强大工具—-对象。对象就像生活中的各种工具,帮助你更好地组织和管理信息。在实际开发中,可以使用对象来表示用户信息、处理表单数据等。01、什么是对象JavaScript对象是一种包含属性和方法的数据类型,可视为一个多功能盒子,用于存放各种数据。在......
  • 【Web】第一周
    【Web】第一周作业一:完成用户注册页面作业二:完成电子汇款单页面作业三:古诗词页面作业四:豆瓣电影页面作业一:完成用户注册页面<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>用户注册页面</title></head><style>.top......