案例-猜数字游戏
文章目录
- 效果展示
- 初始画面
- 演示视频
- 代码区
效果展示
初始画面
演示视频
猜数字游戏
代码区
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猜数字游戏</title><style>.false{color: red;}.true{color: green;}</style>
</head>
<body><div><input class="but" type="button" value="重新开始一局游戏" onclick="restart()"></div><div>请输入要猜的数字：<input class="num" type="text" value=""><input class="guess" type="button" value="猜"></div><div>以及猜的次数：<span class="already">0</span></div><!-- <div>结果：<span class="result">测试结果</span></div> --><div>结果：<span class="result"></span></div>
</body>
<script>let but = document.querySelector('.but')let num = document.querySelector('.num')let guess = document.querySelector('.guess')let already = document.querySelector('.already')let result = document.querySelector('.result')// ---------------------------------------------------------------------------------------// 控制台显示console.dir(but)console.dir(num)console.dir(guess)console.dir(already)console.dir(result)// ---------------------------------------------------------------------------------------// 随机生成1~100数字let guessNumber = Math.floor(Math.random() * 100) + 1console.log('随机数字是：'+guessNumber)// ---------------------------------------------------------------------------------------function restart(){num.value = 0already.textContent = 0result.innerHTML = ""guessNumber = Math.floor(Math.random() * 100) + 1console.log('随机数字是：'+guessNumber)}guess.onclick = function(){let numValue = parseInt(num.value)if(numValue > guessNumber){result.innerHTML = "猜大了"result.className = false;}else if (numValue < guessNumber) {result.innerHTML = "猜小了"result.className = 'false';} else {result.innerHTML = "恭喜！猜对了~"result.className = 'true';}already.textContent = parseInt(already.textContent) + 1}
</script>
</html>
相关文章：
案例-猜数字游戏
文章目录 效果展示初始画面演示视频 代码区 效果展示 初始画面 演示视频 猜数字游戏 代码区 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,…...
POI数据的处理与分析
POI概念 POI（Point of Interest，兴趣点）数据指的是地理空间数据中的一类，表示某一具体地点或位置的信息。通常，这些数据包含位置坐标（经纬度）、名称、地址、类别和其他相关信息。POI 数据广泛应…...
ansible部分模块学习
ansible模块学习 copy模块 copy模块srcsource 源⽂件destdestination ⽬标backupbackupyes 则会在覆盖前进⾏备份mode修改权限owner修改为指定所有者group修改为指定⽤户组 案例1：传输/root/work/scripts/net-tools-install.sh⽂件到/opt/net-tools-install.sh …...
数据库（MySQL）：使用命令从零开始在Navicat创建一个数据库及其数据表（二）.设置主键自增等特点
前言 在上一节中，主要介绍了 Navicat Premium 17 的使用以及创建一个基础的表格。当时只设置了给数据表补充字段，没有设置给数据表删除字段。现在补充一下。 ALTER TABLE student ADD test int(4); 给名为 student 的数据表添加 test 列…...
SQL第13课——创建高级联结
本课讲另外一些联结（含义和使用方法），如何使用表别名，如何对被联结的表使用聚集函数。 13.1 使用表别名 第7课中使用别名引用被检索的表列，给列起别名的语法如下： SQL除了可以对列名和计算字段使用别名&a…...
订阅ROS2中相机的相关话题并保存RGB、深度和点云图
系统：Ubuntu22.04 ROS2版本：ROS2 humble 1.订阅ROS2中相机的相关话题并保存RGB图、深度图和点云图 ros2 topic list/stellar_1/rgb/image_raw /camera/depth/image_raw /stellar_1/points2CMakeLists.txt cmake_minimum_required(VERSION 3.15) projec…...
Open WebUI | 自托管的类 ChatGPT 网站
Open WebUI 是一个扩展性强、功能丰富且用户友好的自托管 WebUI，旨在完全离线操作。它支持各种 LLM 服务，包括 Ollama 和 OpenAI 兼容的 API。该项目在 GitHub 上已有 38k 星，非常受欢迎。 功能介绍 废话不多说，上图！…...
【Python】Python知识总结浅析
Python是一种高级编程语言，由Guido van Rossum于1991年首次发布。它以简洁的语法和强大的功能著称，适用于多种应用场景，包括Web开发、数据分析、人工智能、自动化脚本等。 易于学习和使用：Python的语法简洁明了，适合初…...
c#代码介绍23种设计模式_20策略者模式
目录 1、策略模式的定义 2、策略模式的结构 3、涉及到三个角色： 4、策略者模式在.NET中应用 5、策略者模式的适用场景 6、策略者模式的优缺点 7、实现思路 在现实生活中，策略模式的例子也非常常见，例如，中国的所得税，分为企业所得税、外商投资企业或外商企业所得税…...
FPGA-UART串口接收模块的理解
UART串口接收模块 背景 在之前就有写过关于串口模块的文章——《串口RS232的学习》。工作后很多项目都会用到串口模块，又来重新理解一下FPGA串口接收的代码思路。 关于串口相关的参数，以及在文章《串口RS232的学习》中已有详细的描述，这里就…...
复习HTML(基础）
目录 HTML含义 HTML作用 HTML的常用元素 元素的特点 元素的分类 1 是否嵌套关系 2 是否独占一行 块元素：独占一行 行内元素：共享一行 行内元素与块级元素的转换 3是否有结束标签 常用标签 1 标题标签：有六级 我们用h1 ~h6 表…...
Linux聊天集群开发之环境准备
一.windows下远程操作Linux 第一步：在Linux终端下配置openssh，输入netstate -tanp,查看ssh服务是否启动，默认端口22.。 注：如果openssh服务，则需下载。输入命令ps -e|grep ssh, 查看如否配有， ssh-agent …...
can 总线入门———can简介硬件电路
文章目录 0. 前言1. CAN简介2. 主流通讯协议对比3. CAN 硬件电路4. CAN 电平标准5. CAN 收发器 0. 前言 博客内容来自B站上CAN总线入门教程视频讲解，博客中的插图和内容均为视频中的内容。视频链接 CAN总线入门教程 1. CAN简介 先来看看一它名字的意思，…...
【重学 MySQL】六十、空间类型
【重学 MySQL】六十、空间类型 空间数据类型的分类空间数据类型的属性空间数据的表示方式空间数据的操作应用场景 在MySQL中，空间类型（Spatial Types）主要用于支持地理特征的生成、存储和分析。这些地理特征可以表示世界上具有位置的任何东西…...
python实现DES算法
DES算法 一、算法介绍1.1 背景1.2 原理1.3 基本功能函数1.3.1 初始置换函数 I P IP IP1.3.2 f f f 轮函数1.3.3 逆初始置换函数 I P − 1 IP^{-1} IP−1 1.4 子密钥的生成 二、代码实现2.1 子密钥生成实现2.2 DES加解密实现2.3 完整代码 三、演示效果 一、算法介绍 1.1 背景…...
基于LORA的一主多从监测系统_框架搭建
第一节、框架搭建 打开CubeMAX，选择好芯片，进行基础配置 第一步、先配置时钟源 第二步、配置SYS选项 配置debug口以及计数器源，我这里选择TIM1 第三步、选择I2C接口 配置如下即可，默认配置不用改 第四步、串口选择 我们这里使…...
优化理论及应用精解【25】
文章目录 优化学习率调度1. 阶梯衰减（Step Decay）2. 余弦退火（Cosine Annealing）3. 多项式衰减（Polynomial Decay）4. 指数衰减（Exponential Decay）总结 梯度弥散效应 参考文献 优化 …...
贝锐蒲公英网盘首发，秒建私有云，高速远程访问
虽然公共网盘带来了不少便利，但是大家对隐私泄露和重要数据泄密的担忧也随之增加。如果想要确保数据安全，自建私有云似乎是一条出路，然而面对搭建私有云的复杂步骤，许多人感到力不从心，NAS设备的成本也往往让人望而却步…...
[ 蓝桥 ·算法双周赛 ] 第 19 场 小白入门赛
🔥博客介绍： EvLast 🎥系列专栏： <<数据结构与算法>> << 算法入门>> << C项目>> 🎥 当前专栏: << 算法入门>> 专题 : 帮助小白快速入门算法竞赛 👍…...
HTML+CSS基础 第二季课堂笔记
一、列表 列表都不是单打独斗的，通常都是一组标签组成 1 无序列表 作用：定义一个没有顺序的列表结构 由两个标签组成，ul（容器级标签），li（容器级） ul：英文ulordered …...
)
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引，可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度（创建索引的主要原因）。3. 可以加速表和表之间的连接，实现数据的参考完整性。4. 可以在查询过程中，…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接：A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串，只有在同时为 o 时输出 Yes 并结束程序，否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机，它可以执行Java字节码。Java虚拟机是Java平台的一部分，Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
windows系统MySQL安装文档
概览：本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容，为学习者提供全面的操作指导。关键要点包括： 解压 ：下载完成后解压压缩包，得到MySQL 8.…...