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

相关文章
|
8月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
8月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
8月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
8月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
259 0
JS配合CSS3实现动画和拖动小星星小Demo
|
JavaScript
JS+CSS3点击粒子烟花动画js特效
JS+CSS3点击粒子烟花动画js特效
166 0
JS+CSS3点击粒子烟花动画js特效
|
前端开发 JavaScript
js css 悬浮动画字体
js css 悬浮动画字体
|
Web App开发 前端开发 JavaScript
孤陋寡闻了,才知道已经可以用 JS 来控制 CSS 动画了
最近翻 MDN 突然发现一套叫 Web Animations API 的东东,点进去看才知道,原来是一套控制 css animation 的 API,而且已经有段时间了 🤦‍♂️,而我居然一直不知道。
|
JavaScript 前端开发 索引
|
JavaScript 前端开发
原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能;   传统的js 可以通过回调函数判断动画是否结束;即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件;   transitionend事...
1480 0

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    350
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    272
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    239
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    165
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    344
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    482
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    286
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    160
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    276
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    309