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

简介: 【1月更文挑战第5天】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之间的整数,点击"猜"按钮,程序会给出相应的提示信息,直到猜测正确为止。

相关文章
|
6天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
16 0
|
22天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
23天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。借助插件机制扩展功能,并支持热更新,加速开发流程。
16 4
|
23天前
|
缓存 JavaScript 数据安全/隐私保护
js开发:请解释什么是ES6的Proxy,以及它的用途。
`ES6`的`Proxy`对象用于创建一个代理,能拦截并自定义目标对象的访问和操作,应用于数据绑定、访问控制、函数调用的拦截与修改以及异步操作处理。
17 3
|
23天前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
20 2
|
1天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
1天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
5 1
|
1天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
9天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
10 0
|
23天前
|
Web App开发 JavaScript 前端开发
js开发:请解释什么是Node.js,以及它的应用场景。
Node.js是基于V8的JavaScript运行时,用于服务器端编程。它的事件驱动、非阻塞I/O模型使其在高并发实时应用中表现出色,如Web服务器、实时聊天、API服务、微服务、工具和跨平台桌面应用(使用Electron)。适用于高性能和实时需求场景。
18 4