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

上一个博客发了视频。这个博客因为不能插入视频,所以给大家一张一张截图的

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

<!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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/502755.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java类与对象:从概念到实践的全景解析!

​ 个人主页&#xff1a;秋风起&#xff0c;再归来~ 文章专栏&#xff1a;javaSE的修炼之路 个人格言&#xff1a;悟已往之不谏&#xff0c;知来者犹可追 克心守己&#xff0c;律己则安&#xff01; 1、类的定义格式 在java中定义类时需要用到…

Spring: 在SpringBoot项目中解决前端跨域问题

这里写目录标题 一、什么是跨域问题二、浏览器的同源策略三、SpringBoot项目中解决跨域问题的5种方式&#xff1a;使用CORS1、自定 web filter 实现跨域(全局跨域)2、重写 WebMvcConfigurer(全局跨域)3、 CorsFilter(全局跨域)4、使用CrossOrigin注解 (局部跨域) 一、什么是跨域…

matlab 点云可视化(6)——点云按强度进行可视化

目录 一、功能概述1、算法概述2、主要函数二、代码示例三、结果展示四、参考链接本文由CSDN点云侠原创原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、功能概述 1、算法概述 点云按强度进行可视化 2、主要函数

Request和Response

Request&#xff08;请求&#xff09;&Response&#xff08;响应&#xff09; Request&#xff1a;获取请求数据 Response&#xff1a;设置响应数据 Request继承体系 1.Tomcat需要解析请求数据&#xff0c;封装为request对象&#xff0c;并且创建request对象传递到servic…

分治实现快速排序和归并排序

本文用于记录个人算法竞赛学习&#xff0c;仅供参考 一.快速排序&#xff08;升序为例&#xff09; 思想&#xff1a;确定分界点x&#xff0c;将小于分界点的值放在分界点的左边&#xff0c;将大于分界定的值放在分界点的右边&#xff0c;再递归处理两边的左右区间。 步骤&am…

HR应用人才测评开展招聘,可以显著提升效率

某汽车零部件武汉有限公司诚聘库管员1名…… 孟X毅&#xff0c;男&#xff0c;29岁,市场营销专业,做过生产主管,求一份白班工作。 王X宸&#xff0c;女&#xff0c;22岁&#xff0c;有一年会计经验&#xff0c;求相似工作。 张汉X&#xff0c;男&#xff0c;31岁&#xf…

Python程序怎么打包成exe文件

前言 pyinstaller可以将.py文件打包成.exe可执行文件&#xff0c;即使别人的电脑上没有搭建Python环境&#xff0c;也是可以直接运行程序的。 pyinstaller安装 首先打开cmd&#xff0c;在里面输入下面这一行命令&#xff0c;回车即可。 pip install pyinstaller 我运行命令…

TR2 - Transformer模型的复现

目录 理论知识模型结构结构分解黑盒两大模块块级结构编码器的组成解码器的组成 模型实现多头自注意力块前馈网络块位置编码编码器解码器组合模型最后附上引用部分 模型效果总结与心得体会 理论知识 Transformer是可以用于Seq2Seq任务的一种模型&#xff0c;和Seq2Seq不冲突。 …

Echarts地图之——如何给地图添加外边框轮廓

有时候我们希望给地图外围加一圈边框来增加美感 但实际情况中&#xff0c;我们需要把国界的边框和各个省份属于国界的边框相吻合&#xff0c;否则就会造成两者看起来是错位的感觉 这就需要我们把echarts registerMap的全国省份json和国界边框json的坐标相一致。 这个json我们可…

WEPE系统安装纯净版window11教程(包含pe内系统安装方法)

目录 一.安装u盘启动盘 1.1制作安装系统引导盘 1.2下载保存windows镜像 1.3根据自己电脑品牌查询进入BIOS设置的方法 1.4我们成功进入了PE 二.重装系统 2.1遇到问题 2.2重新来到这个界面 三.PE中基本软件的作用 四.学习声明 今天不敲代码&#xff0c;今天来讲讲We P…

PetaLinux 去除自动获取 IP 地址

问题&#xff1a;系统启动的时候会自动检测 IP 地址&#xff0c;如不需要这个功能&#xff08;该过程需耗时十几秒&#xff09;。可以自定义 IP 地址&#xff0c;去掉这一步。 操作步骤如下&#xff1a; 所有命令均需在非管理员模式下执行 1. 初始化 PetaLinux 运行环境 运行…

LabVIEW车载轴承振动监测系统

LabVIEW车载轴承振动监测系统 随着汽车工业的快速发展&#xff0c;车用轴承的稳定性和可靠性对保障车辆安全运行越来越重要。目前&#xff0c;大多数车用轴承工作在恶劣的环境下&#xff0c;容易出现各种故障。开发了一种基于LabVIEW的车载轴承振动监测系统&#xff0c;提高车…

算法题:桃飘火焰焰,梨堕雪漠漠(Java贪心)

链接&#xff1a;桃飘火焰焰&#xff0c;梨堕雪漠漠 来源&#xff1a;牛客网 题目描述 在某游戏平台打折之际&#xff0c;EternityEternityEternity兴致勃勃地在该游戏平台上购买了nnn个不同的游戏&#xff0c;从1到nnn编号。 通过游览游戏论坛EternityEternityEternity确定…

# Apache SeaTunnel 究竟是什么?

作者 | Shawn Gordon 翻译 | Debra Chen 原文链接 | What the Heck is Apache SeaTunnel? 我在2023年初开始注意到Apache SeaTunnel的相关讨论&#xff0c;一直低调地关注着。该项目始于2017年&#xff0c;最初名为Waterdrop&#xff0c;在Apache DolphinScheduler的创建者…

LInux: fork()究竟是如何工作的?为何一个变量能够接受两个返回值?

LInux: fork函数究竟是如何工作的&#xff1f;为何一个变量能够接受两个返回值&#xff1f; 前言一、fork()用法二 、fork()应用实例展示三、fork()工作原理3.1 为什么要创建子进程&#xff1f;3.2 fork()究竟干了些什么&#xff1f;3.3 fork为什么会存在两个返回值&#xff1f…

文件上传漏洞-黑名单检测

黑名单检测 一般情况下&#xff0c;代码文件里会有一个数组或者列表&#xff0c;该数组或者列表里会包含一些非法的字符或者字符串&#xff0c;当数据包中含有符合该列表的字符串时&#xff0c;即认定该数据包是非法的。 如下图&#xff0c;定义了一个数组$deny_ext array(.a…

如何在Linux系统部署ONLYOFFICE协作办公利器并实现多人实时编辑文档

文章目录 1. 安装Docker2. 本地安装部署ONLYOFFICE3. 安装cpolar内网穿透4. 固定OnlyOffice公网地址 本篇文章讲解如何使用Docker在本地服务器上安装ONLYOFFICE&#xff0c;并结合cpolar内网穿透实现公网访问。 Community Edition允许您在本地服务器上安装ONLYOFFICE文档&…

DSVPN实验报告

一、分析要求 1. 配置R5为ISP&#xff0c;只能进行IP地址配置&#xff0c;所有地址均配为公有IP地址。 - 在R5上&#xff0c;将接口配置为公有IP地址&#xff0c;并确保只进行了IP地址配置。 2. R1和R5之间使用PPP的PAP认证&#xff0c;R5为主认证方&#xff1b;R2于R5之间…

Figma使用问题(更新自己遇到的问题)

文章目录 前言一、如何安装插件&#xff1f;方法1&#xff1a;Figma Community / Figma中文社区方法2&#xff1a;菜单栏 二、图片倾斜插件使用1.Angle Mockups前提&#xff1a;执行过程&#xff1a; 三.中文字体插件&#xff08;宋体等&#xff09;Chinese Font Picker前提&am…

【算法题】三道题理解算法思想——二分查找算法

二分查找算法 本篇文章中会带大家从零基础到学会利用二分查找的思想解决算法题&#xff0c;我从力扣上筛选了三道题&#xff0c;难度由浅到深&#xff0c;会附上题目链接以及算法原理和解题代码&#xff0c;希望大家能坚持看完&#xff0c;绝对能有收获&#xff0c;大家有更好…