JS入门小案例10-两个数字之间比大小

最新推荐文章于 2024-08-11 18:40:36 发布

李析鸢

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量594

点赞数 5

分类专栏： JS入门小案例文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/jiuliangliang/article/details/135343269

版权

JS入门小案例专栏收录该内容

12 篇文章 0 订阅

订阅专栏

该篇文章介绍了如何使用HTML和JavaScript编写一个简单的网页应用，用户点击按钮后，通过prompt获取两个数字并进行比较，显示哪个数字更大。

摘要由CSDN通过智能技术生成

一、需求

输入两个数字，判断两个数字谁最大

二、代码

1、在页面写一个按钮，并绑定ID

 <button id="button">点我</button>

2、查到到这个按钮元素，并且给这个按钮绑定点击事件

 document.querySelector('#button').addEventListener('click', () => {});

3、使用prompt弹框事件，获取到两个输入的数字

  let firstNumber = prompt('请输入第一个数字');
  let secondNumber = prompt('请输入第二个数字');

4、先判断两个都输入有值，然后判断如果第一个数大于第二个，则输入第一个数字大，反之输出第二个数字大

  if (firstNumber && secondNumber) {
          if (firstNumber > secondNumber) {
            alert('第一个数字大');
          } else {
            alert('第二个数字大');
          }
        }

5、总体代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="button">点我</button>
    <script>
      document.querySelector('#button').addEventListener('click', () => {
        let firstNumber = prompt('请输入第一个数字');
        let secondNumber = prompt('请输入第二个数字');
        if (firstNumber && secondNumber) {
          if (firstNumber > secondNumber) {
            alert('第一个数字大');
          } else {
            alert('第二个数字大');
          }
        }
      });
    </script>
  </body>
</html>