当前位置： 首页 > news >正文

案例-猜数字游戏

news 2026/3/28 16:14:33

文章目录

  • 效果展示
    • 初始画面
    • 演示视频
  • 代码区

效果展示

初始画面

在这里插入图片描述

演示视频

猜数字游戏

代码区

<!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,…...

编程日记 2024/10/8 0:04:43

POI数据的处理与分析

POI概念 POI&#xff08;Point of Interest&#xff0c;兴趣点&#xff09;数据指的是地理空间数据中的一类&#xff0c;表示某一具体地点或位置的信息。通常&#xff0c;这些数据包含位置坐标&#xff08;经纬度&#xff09;、名称、地址、类别和其他相关信息。POI 数据广泛应…...

编程日记 2024/10/8 0:02:41

ansible部分模块学习

ansible模块学习 copy模块 copy模块srcsource 源⽂件destdestination ⽬标backupbackupyes 则会在覆盖前进⾏备份mode修改权限owner修改为指定所有者group修改为指定⽤户组 案例1&#xff1a;传输/root/work/scripts/net-tools-install.sh⽂件到/opt/net-tools-install.sh …...

编程日记 2024/10/8 0:01:39

数据库（MySQL）：使用命令从零开始在Navicat创建一个数据库及其数据表（二）.设置主键自增等特点

前言 在上一节中&#xff0c;主要介绍了 Navicat Premium 17 的使用以及创建一个基础的表格。当时只设置了给数据表补充字段&#xff0c;没有设置给数据表删除字段。现在补充一下。 ALTER TABLE student ADD test int(4); 给名为 student 的数据表添加 test 列&#xf…...

编程日记 2024/10/7 23:58:37

SQL第13课——创建高级联结

本课讲另外一些联结&#xff08;含义和使用方法&#xff09;&#xff0c;如何使用表别名&#xff0c;如何对被联结的表使用聚集函数。 13.1 使用表别名 第7课中使用别名引用被检索的表列&#xff0c;给列起别名的语法如下&#xff1a; SQL除了可以对列名和计算字段使用别名&a…...

编程日记 2024/10/7 23:56:34

订阅ROS2中相机的相关话题并保存RGB、深度和点云图

系统&#xff1a;Ubuntu22.04 ROS2版本&#xff1a;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…...

编程日记 2024/10/7 23:54:32

Open WebUI | 自托管的类 ChatGPT 网站

Open WebUI 是一个扩展性强、功能丰富且用户友好的自托管 WebUI&#xff0c;旨在完全离线操作。它支持各种 LLM 服务&#xff0c;包括 Ollama 和 OpenAI 兼容的 API。该项目在 GitHub 上已有 38k 星&#xff0c;非常受欢迎。 功能介绍 废话不多说&#xff0c;上图&#xff01;…...

编程日记 2024/10/7 23:53:30

【Python】Python知识总结浅析

Python是一种高级编程语言&#xff0c;由Guido van Rossum于1991年首次发布。它以简洁的语法和强大的功能著称&#xff0c;适用于多种应用场景&#xff0c;包括Web开发、数据分析、人工智能、自动化脚本等。 易于学习和使用&#xff1a;Python的语法简洁明了&#xff0c;适合初…...

编程日记 2024/10/7 23:52:29

c#代码介绍23种设计模式_20策略者模式

目录 1、策略模式的定义 2、策略模式的结构 3、涉及到三个角色： 4、策略者模式在.NET中应用 5、策略者模式的适用场景 6、策略者模式的优缺点 7、实现思路 在现实生活中，策略模式的例子也非常常见，例如，中国的所得税，分为企业所得税、外商投资企业或外商企业所得税…...

编程日记 2024/10/7 23:51:28

FPGA-UART串口接收模块的理解

UART串口接收模块 背景 在之前就有写过关于串口模块的文章——《串口RS232的学习》。工作后很多项目都会用到串口模块&#xff0c;又来重新理解一下FPGA串口接收的代码思路。 关于串口相关的参数&#xff0c;以及在文章《串口RS232的学习》中已有详细的描述&#xff0c;这里就…...

编程日记 2024/10/7 23:50:27

复习HTML(基础）

目录 HTML含义 HTML作用 HTML的常用元素 元素的特点 元素的分类 1 是否嵌套关系 2 是否独占一行 块元素&#xff1a;独占一行 行内元素&#xff1a;共享一行 行内元素与块级元素的转换 3是否有结束标签 常用标签 1 标题标签&#xff1a;有六级 我们用h1 ~h6 表…...

编程日记 2024/10/7 23:49:25

Linux聊天集群开发之环境准备

一.windows下远程操作Linux 第一步&#xff1a;在Linux终端下配置openssh&#xff0c;输入netstate -tanp,查看ssh服务是否启动&#xff0c;默认端口22.。 注&#xff1a;如果openssh服务&#xff0c;则需下载。输入命令ps -e|grep ssh, 查看如否配有&#xff0c; ssh-agent …...

编程日记 2024/10/7 23:48:24

can 总线入门———can简介硬件电路

文章目录 0. 前言1. CAN简介2. 主流通讯协议对比3. CAN 硬件电路4. CAN 电平标准5. CAN 收发器 0. 前言 博客内容来自B站上CAN总线入门教程视频讲解&#xff0c;博客中的插图和内容均为视频中的内容。视频链接 CAN总线入门教程 1. CAN简介 先来看看一它名字的意思&#xff0c…...

编程日记 2024/10/7 23:44:18

【重学 MySQL】六十、空间类型

【重学 MySQL】六十、空间类型 空间数据类型的分类空间数据类型的属性空间数据的表示方式空间数据的操作应用场景 在MySQL中&#xff0c;空间类型&#xff08;Spatial Types&#xff09;主要用于支持地理特征的生成、存储和分析。这些地理特征可以表示世界上具有位置的任何东西…...

编程日记 2024/10/7 23:43:16

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 背景…...

编程日记 2024/10/7 23:41:05

基于LORA的一主多从监测系统_框架搭建

第一节、框架搭建 打开CubeMAX&#xff0c;选择好芯片&#xff0c;进行基础配置 第一步、先配置时钟源 第二步、配置SYS选项 配置debug口以及计数器源&#xff0c;我这里选择TIM1 第三步、选择I2C接口 配置如下即可&#xff0c;默认配置不用改 第四步、串口选择 我们这里使…...

编程日记 2024/10/7 23:40:04

优化理论及应用精解【25】

文章目录 优化学习率调度1. 阶梯衰减&#xff08;Step Decay&#xff09;2. 余弦退火&#xff08;Cosine Annealing&#xff09;3. 多项式衰减&#xff08;Polynomial Decay&#xff09;4. 指数衰减&#xff08;Exponential Decay&#xff09;总结 梯度弥散效应 参考文献 优化 …...

编程日记 2024/10/7 23:39:03

贝锐蒲公英网盘首发，秒建私有云，高速远程访问

虽然公共网盘带来了不少便利&#xff0c;但是大家对隐私泄露和重要数据泄密的担忧也随之增加。如果想要确保数据安全&#xff0c;自建私有云似乎是一条出路&#xff0c;然而面对搭建私有云的复杂步骤&#xff0c;许多人感到力不从心&#xff0c;NAS设备的成本也往往让人望而却步…...

编程日记 2024/10/7 23:36:00

[ 蓝桥 ·算法双周赛 ] 第 19 场 小白入门赛

&#x1f525;博客介绍&#xff1a; EvLast &#x1f3a5;系列专栏&#xff1a; <<数据结构与算法>> << 算法入门>> << C项目>> &#x1f3a5; 当前专栏: << 算法入门>> 专题 : 帮助小白快速入门算法竞赛 &#x1f44d…...

编程日记 2024/10/7 23:34:59

HTML+CSS基础 第二季课堂笔记

一、列表 列表都不是单打独斗的&#xff0c;通常都是一组标签组成 1 无序列表 作用&#xff1a;定义一个没有顺序的列表结构 由两个标签组成&#xff0c;ul&#xff08;容器级标签&#xff09;&#xff0c;li&#xff08;容器级&#xff09; ul&#xff1a;英文ulordered …...

编程日记 2024/10/7 23:32:57

避开SDR通信的‘坑’：我在用Pluto做16QAM传输时遇到的相位偏移和同步问题

避开SDR通信的‘坑’&#xff1a;我在用Pluto做16QAM传输时遇到的相位偏移和同步问题 第一次用Pluto SDR搭建16QAM通信链路时&#xff0c;我盯着屏幕上扭曲的星座图发呆了半小时——理论上完美的16个星点&#xff0c;在实际接收时却像被无形的手揉成了一团毛线。这种挫败感想必…...

编程新知 2026/3/28 15:12:53

丹青识画系统C语言文件读写操作：本地图像批处理脚本

丹青识画系统C语言文件读写操作&#xff1a;本地图像批处理脚本 1. 引言 如果你是一个C语言开发者&#xff0c;手头有一堆图片需要分析&#xff0c;比如给它们打标签、识别内容&#xff0c;但你的工作环境是内网或者对网络有严格限制&#xff0c;没法直接调用在线的AI服务&am…...

编程新知 2026/3/28 13:24:09

从零搭建Binance Trade Bot：精通加密货币自动交易工具配置与使用

从零搭建Binance Trade Bot&#xff1a;精通加密货币自动交易工具配置与使用 【免费下载链接】binance-trade-bot Automated cryptocurrency trading bot 项目地址: https://gitcode.com/gh_mirrors/bi/binance-trade-bot 一、核心功能解析&#xff1a;Binance Trade Bo…...

编程新知 2026/3/28 13:18:08

FDS：高性能火灾动力学模拟的技术革新与工程实践

FDS&#xff1a;高性能火灾动力学模拟的技术革新与工程实践 【免费下载链接】fds Fire Dynamics Simulator 项目地址: https://gitcode.com/gh_mirrors/fd/fds 一、核心价值&#xff1a;重新定义火灾安全工程的仿真范式 Fire Dynamics Simulator (FDS) 作为火灾科学领域…...

编程新知 2026/3/28 10:49:03

WebPlotDigitizer实战指南：从科研图表中智能提取数据的完整方案

WebPlotDigitizer实战指南&#xff1a;从科研图表中智能提取数据的完整方案 【免费下载链接】WebPlotDigitizer WebPlotDigitizer: 一个基于 Web 的工具&#xff0c;用于从图形图像中提取数值数据&#xff0c;支持 XY、极地、三角图和地图。 项目地址: https://gitcode.com/g…...

编程新知 2026/3/28 9:22:22

代码随想录算法训练营第十天|LeetCode 232 用栈实现队列、LeetCode 225 用队列实现栈、LeetCode 20 有效的括号、LeetCode 1047 删除字符串中的所有相邻重复项

参考文章均来自代码随想录 栈与队列理论文章链接 LeetCode 232 用栈实现队列 参考文章链接 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff09;&#xff1a; 实现 MyQueue 类&#xff1a; void push(in…...

编程新知 2026/3/28 8:41:55

Vue项目里用Frappe-Gantt 0.6.1做项目管理甘特图，我踩过的坑都在这了

Vue项目中集成Frappe-Gantt的避坑指南与工程化实践 在最近的一个敏捷开发项目中&#xff0c;我们需要为产品团队提供一个直观的任务进度管理工具。经过几轮技术选型&#xff0c;最终选择了Frappe-Gantt 0.6.1作为基础组件。这个选择并非一帆风顺——从最初的简单集成到最终形成…...

编程新知 2026/3/28 4:13:53

Pyodide vs Rust-Python vs WASI-NN：Python WASM性能终极对决（含13项微基准测试原始数据）

第一章&#xff1a;Pyodide vs Rust-Python vs WASI-NN&#xff1a;Python WASM性能终极对决&#xff08;含13项微基准测试原始数据&#xff09; WebAssembly 正在重塑 Python 在浏览器与边缘环境中的执行范式。本章基于统一测试平台&#xff08;WASI SDK 20.0、Chrome 124、In…...

编程新知 2026/3/28 3:37:36

AI编程实战：如何用Cursor和Coze在1小时内完成文生图小程序开发

AI编程实战&#xff1a;如何用Cursor和Coze在1小时内完成文生图小程序开发 当产品灵感突然闪现&#xff0c;如何在最短时间内将它变成可交互的原型&#xff1f;传统开发流程中&#xff0c;从UI设计到API对接至少需要数天时间。而现在&#xff0c;借助AI编程工具链&#xff0c;我…...

编程新知 2026/3/28 3:33:29

M5Stack U126 RTC驱动库：PCF8563T嵌入式实时时钟深度解析

1. 项目概述M5Unit-RTC 是专为 M5Stack 生态中 Unit 系列模块设计的轻量级实时时钟&#xff08;RTC&#xff09;驱动库&#xff0c;对应硬件型号为U126—— 一款基于Ricoh RP5C01A 兼容架构、实际采用 NXP PCF8563T 实时时钟芯片的 IC 接口 RTC 模块。该模块集成高精度温度补偿…...

编程新知 2026/3/28 2:47:07