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

以下是一个使用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之间的整数,点击"猜"按钮,程序会给出相应的提示信息,直到猜测正确为止。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java基本语法(内涵与C++的不同)

java语法 在介绍java中&#xff0c;我会去书写一些java语言与C的不同点。 目录 java语法 变量、运算符、输入与输出 内置数据类型 常量 运算符 两种输入输出 输入 方法一 方法二 输出 方法一 方法二 判断语句 if-else语句 switch语句 逻辑表达式和条件运算符 循环语句 …

vue.js安装

1:下载 Node.js 官网&#xff1a;https://nodejs.org/en/download 2:安装 node -v npm -v 3:配置 npm config set prefix "F:\node\node_global" npm config set cache "F:\node\node_cache" 按 win 键并输入“编辑系统环境变量”调出系统属性界面&a…

AWTK 开源串口屏开发(7) - 屏幕保护

现代屏幕其实并不需要屏幕保护&#xff0c;不过屏幕保护程序会衍生一些其它用途。比如&#xff1a; 保护隐私。长时间不操作&#xff0c;通过动画或者其它方式隐藏屏幕内容。数据安全。长时间不操作&#xff0c;需要输入密码才能恢复。美观/广告。长时间不操作&#xff0c;显示…

C++中的static(静态)

2014年1月19日 内容整理自The Cherno:C系列 2014年1月20日 内容整理自《程序设计教程&#xff1a;用C语言编程 第三版》 陈家骏 郑滔 -----------------------------------------------------------------------------------------------------------------------------…

JS执行顺序

众所周知&#xff0c;JavaScript 是单线程语言,只能同时执行做一件事(js只有一个线程&#xff0c;称之为main thread-主线程) 1.Javascript 运行机制 main thread 主线程和 call-stack 调用栈(执行栈)&#xff0c;所有的任务都会被放到调用栈等待主线程执行。 2.Javascript 任…

SpringBoot+beetl idea热更新解决方案

SpringBootbeetl idea热更新解决方案 第一在application中开启&#xff1a; beetl:resource-auto-check: true #热加载beetl模板&#xff0c;开发时候用第二在application中开启&#xff1a; devtools: 这个部分专门用于配置Spring Boot DevTools的相关参数。DevTools…

Centos8中yum安装docker问题

问题&#xff1a;执行yum update 报错 problem with installed package containers-common-2:1-2.module_el8.5.08906b136101.noarch 执行下面的containerd.io版本安装即可 yum install https://download.docker.com/linux/centos/8/x86_64/stable/Packages/containerd.io-1.…

Java SE入门及基础(23)

目录 方法带参 1. 构造方法带参 案例场景 思考&#xff1a;以上代码存在什么问题&#xff1f; 2. 方法带参 方法带参语法 案例场景 思考&#xff1a;以上代码存在什么问题&#xff1f; Java SE文章参考:Java SE入门及基础知识合集-CSDN博客 方法带参 1. 构造方法带参 …

十八周周报

文章目录 摘要文献阅读3D reconstruction of human bodies from single-view and multi-view images: A systematic review简介研究方法搜索策略选择标准搜索结果 三维重建方法单个视图中使用的技术基于参数化人体模型的回归基于非参数人体模型的回归 多个视图中使用的技术基于…

base64图片是什么?原理是什么?优缺点是什么?

Base64图片是一种将图像数据编码为文本字符串的方法&#xff0c;通常用于将图像嵌入到网页或其他文档中&#xff0c;以减少HTTP请求或实现某些特定的需求。Base64编码的原理是将3个8位的字节转化为4个6位的字节&#xff0c;然后在6位的前面补两个0&#xff0c;形成8位一个字节的…

PaddleNLP评论观点抽取和属性级情感分析

项目地址&#xff1a;PaddleNLP评论观点抽取和属性级情感分析 - 飞桨AI Studio星河社区 (baidu.com) 情感分析旨在对带有情感色彩的主观性文本进行分析、处理、归纳和推理&#xff0c;其广泛应用于消费决策、舆情分析、个性化推荐等领域&#xff0c;具有很高的商业价值。 依托…

C#,因数分解(质因子分解)Pollard‘s Rho算法的源代码

因数分解&#xff08;也称为质因子分解&#xff09;&#xff1a;将一个大整数分解它的质因子之乘积的算法。 Pollard Rho算法的基本思路&#xff1a;先判断当前数是否是素数&#xff08;质数&#xff09;&#xff0c;如果是&#xff0c;则直接返回。如果不是&#xff0c;继续找…

11、Kafka ------ Kafka 核心API 及 生产者API 讲解

目录 Kafka核心API 及 生产者API讲解★ Kafka的核心APIKafka包含如下5类核心API&#xff1a; ★ 生产者APIKafka 的API 文档 ★ 使用生产者API发送消息 Kafka核心API 及 生产者API讲解 官方文档 ★ Kafka的核心API Kafka包含如下5类核心API&#xff1a; Producer API&#x…

spring data mongo 在事务中,无法自动创建collection

spring data mongo 在事务中,无法自动创建collection org.springframework.dao.DataIntegrityViolationException: Write operation error on server xxx:30001. Write error: WriteError{code=263, message=Cannot create namespace xxx.xxxin multi-document transaction.…

Ubuntu18.04 gcc找不到

make报错gcc: not found 问题描述 rootubuntu:/#make gcc -I. -I.. -I../include -fPIC -DOPENSSL_PIC -DZLIB_SHARED -DZLIB -DOPENSSL_THREADS -D_REENTRANT -DDSO_DLFCN -DHAVE_DLFCN_H -m64 -DL_ENDIAN -DTERMIO -O3 -Wall -DOPENSSL_IA32_SSE2 -DOPENSSL_BN_ASM_MONT -…

Redis(四)

1、Redis的单/多线程 1.1、单线程 其实直接说Redis什么单线程或者是多线程&#xff0c;不太准确&#xff0c;在redis的4.0版主之前是单线程&#xff0c;然后在之后的版本中redis的渐渐改为多线程。 Redis是单线程主要是指Redis的网络IO和键值对读写是由一个线程来完成的&#…

小白水平理解面试经典题目LeetCode 125 Valid Palindrome(验证回文串)

125 验证回文串 说到公司面试&#xff0c;那就是得考出高度&#xff0c;考出水平&#xff0c;什么兼顾这两者呢&#xff0c;那就得看这道 原题描述&#xff1a; 给定一个字符串&#xff0c;判断它是否是回文串。回文串是指正读和反读都一样的字符串。 输入: “A man, a pla…

超级弱口令检查工具

工具介绍 超级弱口令检查工具是一款Windows平台的弱口令审计工具&#xff0c;支持批量多线程检查&#xff0c;可快速发现弱密码、弱口令账号&#xff0c;密码支持和用户名结合进行检查&#xff0c;大大提高成功率&#xff0c;支持自定义服务端口和字典。 工具采用C#开发&#…

1.19(232.用栈实现队列)

1.19(232.用栈实现队列) 在push数据的时候&#xff0c;只要数据放进输入栈就好&#xff0c;但在pop的时候&#xff0c;操作就复杂一些&#xff0c;输出栈如果为空&#xff0c;就把进栈数据全部导入进来&#xff08;注意是全部导入&#xff09;&#xff0c;再从出栈弹出数据&a…

QList应用大全

一.概述 1.QList介绍&#xff1a; QList将项目存储在一个列表中&#xff0c;该列表提供基于索引的快速访问以及基于索引的插入和删除。QList、QLinkedList 和 QVector 提供了类似的 API 和功能。QList不是指针结构体类型的链表&#xff0c;真正的结构体指针链表是 QLinkedLis…