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

html css js 开发一个猜数字游戏

news 2026/3/30 13:12:44

以下是一个使用HTML、CSS和JS开发的简单猜数字游戏的示例：

HTML代码：

<!DOCTYPE html>
<html>
<head><title>猜数字游戏</title><link rel="stylesheet" type="text/css" href="style.css">
</head>
<body><h1>猜数字游戏</h1><p>请输入一个1到100之间的整数：</p><input type="number" id="guess"><button onclick="checkGuess()">猜</button><p id="message"></p><script src="script.js"></script>
</body>
</html>

CSS代码（style.css）：

body {text-align: center;font-family: Arial, sans-serif;
}h1 {color: #333;
}input {padding: 5px;width: 100px;margin-top: 10px;
}button {padding: 5px 10px;margin-top: 10px;
}#message {margin-top: 20px;font-weight: bold;
}

JavaScript代码（script.js）：

// 生成一个1到100的随机整数
var randomNumber = Math.floor(Math.random() * 100) + 1;// 获取用户输入的猜测数值元素
var guessInput = document.getElementById("guess");// 获取显示提示信息的元素
var message = document.getElementById("message");function checkGuess() {// 获取用户输入的猜测数值var guess = parseInt(guessInput.value);// 检查猜测数值与随机数的关系if (guess === randomNumber) {message.textContent = "恭喜你，猜对了！";message.style.color = "green";} else if (guess < randomNumber) {message.textContent = "猜小了！";message.style.color = "red";} else if (guess > randomNumber) {message.textContent = "猜大了！";message.style.color = "red";}
}

将上述代码保存为HTML、CSS和JS文件，并在浏览器中打开HTML文件，即可开始玩猜数字游戏。用户输入一个1到100之间的整数，点击"猜"按钮，程序会给出相应的提示信息，直到猜测正确为止。

相关文章：

html css js 开发一个猜数字游戏

以下是一个使用HTML、CSS和JS开发的简单猜数字游戏的示例&#xff1a; HTML代码&#xff1a; <!DOCTYPE html> <html> <head><title>猜数字游戏</title><link rel"stylesheet" type"text/css" href"style.css&quo…...

编程日记 2024/1/23 20:16:32

HDD 东山再起，单块 30TB 起步新品想要颠覆储存行业

不得不承认&#xff0c;这年头机械硬盘&#xff08;HDD&#xff09;是越来越不受待见了。 体积大&#xff0c;耗电高&#xff0c;速度慢等多年祖传特点无不脱离当前消费者所追求的轻量化&#xff0c;高性能。 个人消费市场不约而同选择全面奔向固态硬盘&#xff08;SSD&#x…...

编程日记 2024/1/23 20:15:31

【网络安全】-基本工具msf

secure 1、有此漏洞的目标主机2、无此漏洞的目标主机&#xff08;常用&#xff09; ps.本着兴趣爱好&#xff0c;加强电脑的安全防护能力&#xff0c;并严格遵守法律和道德规范。msf&#xff08;metasploit framework&#xff09;是一个开源的渗透测试框架&#xff0c;用于开发…...

编程日记 2024/1/23 20:14:30

Vue3的ref和reactive

目录 1、ref的基本使用 2、reactive的基本使用 3、ref操作dom 4、ref与reactive的异同 1、ref的基本使用 ref创建数据可以是基本类型也可以是引用类型 ref函数创建响应式数据&#xff0c;返回值是一个对象 模版中使用ref数据,省略.value&#xff0c;js代码中不能省略 获…...

编程日记 2024/1/23 20:13:29

Flink编程——风险欺诈检测

Flink 风险欺诈检测 文章目录 Flink 风险欺诈检测背景准备条件FraudDetectionJob.javaFraudDetector.java 代码分析执行环境创建数据源对事件分区 & 欺诈检测输出结果运行作业欺诈检测器 欺诈检测器 v1&#xff1a;状态欺诈检测器 v2&#xff1a;状态 时间完整的程序期望的…...

编程日记 2024/1/23 20:12:28

Day37 贪心算法 part06 738. 单调递增的数字 968. 监控二叉树

贪心算法 part06 738. 单调递增的数字 968. 监控二叉树 738. 单调递增的数字 class Solution { public:int monotoneIncreasingDigits(int n) {string strNum to_string(n);int tag strNum.size();for(int i strNum.size()-1; i>1; i--){if(strNum[i]<strNum[i-1]){…...

编程日记 2024/1/23 20:07:24

SpringBoot Redis入门（四）——Redis单机、哨兵、集群模式

单机模式&#xff1a;单台缓存服务器&#xff0c;开发、测试环境下使用&#xff1b;哨兵模式&#xff1a;主-从模式&#xff0c;提高缓存服务器的高可用和安全性。所有缓存的数据在每个节点上都一致。每个节点添加监听器&#xff0c;不断监听节点可用状态&#xff0c;一旦主节点…...

编程日记 2024/1/23 20:06:22

获取数组中的第一个、第二个、第三个......元素

常规操作可以直接使用索引&#xff08;下标&#xff09;获取&#xff1a; const arr [5,8,6,9,10] const first arr[0] //5 const second arr[1] //8 const third arr[2] //6 不使用索引&#xff0c;如何获取&#xff1a; const [first] [5,8,6,9,10] //…...

编程日记 2024/1/23 20:04:20

前端面试题（持续更新~~）

文章目录 一、基础1、数组常用的方法2、数组有哪几种循环方式&#xff1f;分别有什么作用&#xff1f;3、字符串常用的方法4、原型链5、闭包6、常见的继承7、cookie 、localstorage 、 sessionstrorage区别8、数组去重方法9、http 的请求方式10、数据类型的判断方法11、cookie …...

编程日记 2024/1/23 20:02:18

ubuntu下无法访问和ping通github的一种解决方法

近期在ubuntu下突然无法访问github了&#xff0c;ping也无法ping通&#xff0c;尝试过更换不同的网络也无济于事。后来在https://blog.csdn.net/weixin_48544978/article/details/133899687 这个文章中找到了解决办法。 运气比较好&#xff0c;只按照文章中的第一步将http://…...

编程日记 2024/1/23 20:00:16

C#，入门教程(28)——文件夹（目录）、文件读（Read）与写（Write）的基础知识

上一篇&#xff1a; C#&#xff0c;入门教程(27)——应用程序&#xff08;Application&#xff09;的基础知识https://blog.csdn.net/beijinghorn/article/details/125094837 C#知识比你的预期简单的多&#xff0c;但也远远超乎你的想象&#xff01; 与文件相关的知识&#xf…...

编程日记 2024/1/23 19:57:14

开源大数据集群部署（六）Keytab文件生成

作者&#xff1a;櫰木 Keytab文件用于在不输入密码的情况下对主体&#xff08;用户或服务&#xff09;进行身份验证。以下是创建Kerberos身份验证的步骤。 1、创建keytab文件 除了使用明文密码登录之外&#xff0c;Kerberos还可以使用keytab密码文件登陆&#xff0c;现在为te…...

编程日记 2024/1/23 19:56:13

图神经网络X项目｜基于图神经网络的电商行为的预测（5%）

文章目录 Jupyter Notebook 学习人工智能的好帮手数据集数据集下载数据集调用数据集应用技巧——获取不重复的编号数据集应用技巧——随机采样数据集应用技巧——抽取前N项进行模拟测试 数据集构建技巧一——查看数据集构建进度 Jupyter Notebook 学习人工智能的好帮手 【Jupy…...

编程日记 2024/1/23 19:55:12

仰暮计划|“说是操场，那就是个土坡，我们在那儿上边种种树啊，拔拔草，有的时候还会有同学来喂喂羊啥的，这都是我们的娱乐”

我是1948年农历二月份在河南省许昌市五女店镇的一个乡村里边出生的。从我记事的时候&#xff0c;中华人民共和国就已经成立了。当时是好多年&#xff0c;经历了三大改造呀、生产队呀、大队呀&#xff0c;乱七八糟的很多&#xff0c;估计你们现在这些孩子们啊&#xff0c;都没有…...

编程日记 2024/1/23 19:52:09

Java【代码 16】将word、excel文件转换为pdf格式和将pdf文档转换为image格式工具类分享

1.感谢 感谢小伙伴儿的分享&#xff1a; ● 不羁 ● 郭中天 整合调整后的工具类Gitee地址&#xff1a;https://gitee.com/yuanzhengme/java_application_aspose_demo 2.包含的工具类 ● WordToPdfUtil用于将word文档转换为pdf格式的工具类 ● ExcelToPdfUtil用于将excel文档…...

编程日记 2024/1/23 19:48:06

8亿日活的抖音，用“自我设限”谋求长期主义

文&#xff5c;新熔财经 作者&#xff5c;寒蝉鸣 随着手机近乎全民化的普及&#xff0c;在互联网上“冲浪”的人是越来越多了。 根据QuestMobile发布的《中国互联网核心趋势年度报告&#xff08;2023&#xff09;》&#xff0c;2023年&#xff0c;中国移动互联网月活跃用户规…...

编程日记 2024/1/23 19:47:04

Final Cut Pro v10.7.1中文版 专业级视频剪辑软件 兼容M

Final Cut Pro 是 macOS平台上最好的视频剪辑软件&#xff0c;基于Cocoa编写&#xff0c;支持多路多核心处理器&#xff0c;支持GPU加速&#xff0c;支持后台渲染&#xff0c;可编辑从标清到4K的各种分辨率视频&#xff0c;ColorSync管理的色彩流水线则可保证全片色彩的一致性。…...

编程日记 2024/1/23 19:44:00

Chrome扩展之通信

Chrome扩展通信 chrome扩展的5种js js类型介绍popup单击插件图标后的弹窗中的js&#xff0c;由于单击图标打开popup&#xff0c;焦点离开又立即关闭&#xff0c;生命周期一般很短。content-script与页面共享DOM&#xff0c;但是不共享JS&#xff0c;可访问部分chrome扩展API。…...

编程日记 2024/1/23 19:42:58

Appium 环境配置

Appium 是一个开源的、跨平台的测试框架&#xff0c;可以用来测试 Native App、混合应用、移动 Web 应用&#xff08;H5 应用&#xff09;等&#xff0c;也是当下互联网企业实现移动自动化测试的重要工具。Appium 坚持的测试理念&#xff1a; •无需用户对 App 进行任何修改或…...

编程日记 2024/1/23 19:40:55

前端JavaScript篇之Javscript数组的常用方法有哪些？JavaScript判断数组的方式有哪些？

目录 Javscript数组的常用方法有哪些&#xff1f;JavaScript判断数组的方式有哪些&#xff1f;1. Array.isArray() 方法&#xff1a;2. instanceof 操作符&#xff1a;3. Object.prototype.toString.call() 方法&#xff1a;4. Array.from() 方法&#xff1a; Javscript数组的常…...

编程日记 2024/1/23 19:37:53

cv_unet_image-colorization高保真上色案例：人脸肤色/服饰纹理自然还原实录

cv_unet_image-colorization高保真上色案例&#xff1a;人脸肤色/服饰纹理自然还原实录 你有没有翻看过家里的老相册&#xff1f;那些泛黄的黑白照片&#xff0c;记录着珍贵的瞬间&#xff0c;却总让人觉得少了点什么。色彩&#xff0c;是记忆的温度。过去&#xff0c;为黑白照…...

编程新知 2026/3/30 11:21:46

Loop：Mac窗口管理的优雅革命，开源免费的全新体验

Loop&#xff1a;Mac窗口管理的优雅革命&#xff0c;开源免费的全新体验 【免费下载链接】Loop MacOS窗口管理 项目地址: https://gitcode.com/GitHub_Trending/lo/Loop 你是否曾在多窗口工作中迷失方向&#xff1f;Loop作为一款开源的macOS窗口管理工具&#xff0c;通过…...

编程新知 2026/3/30 9:45:55

ncmdumpGUI终极指南：解锁你的音乐收藏，告别NCM格式束缚

ncmdumpGUI终极指南&#xff1a;解锁你的音乐收藏&#xff0c;告别NCM格式束缚 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾经遇到过这样的情况&am…...

编程新知 2026/3/30 9:41:54

黑丝空姐-造相Z-Turbo应用场景：快速生成创意配图，提升内容创作效率

黑丝空姐-造相Z-Turbo应用场景&#xff1a;快速生成创意配图&#xff0c;提升内容创作效率 1. 镜像概述与核心价值 黑丝空姐-造相Z-Turbo是一款基于Xinference部署的文生图模型服务&#xff0c;专门针对特定风格图片生成进行了优化。该镜像通过gradio提供了直观的Web界面&…...

编程新知 2026/3/30 9:27:51

VisualVM JMX监控实战：MBean管理与应用指标收集

VisualVM JMX监控实战&#xff1a;MBean管理与应用指标收集 【免费下载链接】visualvm VisualVM is an All-in-One Java Troubleshooting Tool 项目地址: https://gitcode.com/gh_mirrors/vi/visualvm VisualVM是一款功能强大的Java故障排除工具&#xff0c;它集成了JMX…...

编程新知 2026/3/30 9:13:44

工业能量：04.选型小Tips：预算2000元玩转工厂电源

04.选型小Tips：预算2000元玩转工厂电源（新手也能选对不踩坑，PLC机器人稳稳的）** 在工厂里，最昂贵的不是设备，而是“停机一秒的代价”。 哎，师傅们，槐树底下风儿吹得正凉快，今天咱不拆原理、不讲高端配置，就聊最接地气的——2000块钱怎么给车间PLC和机器人挑个靠谱心脏…...

编程新知 2026/3/30 9:03:40

终极Django CORS Headers缓存优化指南：如何正确配置Vary头部提升性能

终极Django CORS Headers缓存优化指南&#xff1a;如何正确配置Vary头部提升性能 【免费下载链接】django-cors-headers Django app for handling the server headers required for Cross-Origin Resource Sharing (CORS) 项目地址: https://gitcode.com/gh_mirrors/dj/djang…...

编程新知 2026/3/30 8:55:35

上海优质seo公司推荐_上海seo公司的优势在哪里

<h3 id"seo_seo">上海优质seo公司推荐_上海seo公司的优势在哪里</h3> <p>在当今互联网营销的时代&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;已经成为企业提升网站流量、品牌知名度的重要手段。特别是在经济发达的大都市上海&#xff0c…...

编程新知 2026/3/30 7:14:59

2024年TVBOX源接口终极整理：手把手教你如何筛选稳定高速线路

2024年TVBOX源接口高效筛选与优化指南 在流媒体内容消费日益普及的今天&#xff0c;TVBOX作为一款开源播放器解决方案&#xff0c;凭借其强大的扩展性和丰富的资源获取能力&#xff0c;赢得了众多技术爱好者的青睐。然而&#xff0c;面对网络上浩如烟海的源接口资源&#xff0c…...

编程新知 2026/3/30 4:29:45

YOLOv8训练自己的道路裂缝数据集，从数据标注到模型部署的保姆级避坑指南

YOLOv8道路裂缝检测实战&#xff1a;从数据标注到模型部署的全流程避坑指南 道路养护工程师小张最近遇到了头疼的问题——每天需要人工巡检数十公里道路&#xff0c;用粉笔标记裂缝位置再拍照记录。这种传统方式效率低下且容易遗漏细微裂缝。直到他发现了YOLOv8这个目标检测利器…...

编程新知 2026/3/30 2:52:39