如何使用 JavaScript 在给定数字在范围内时显示消息?

如何使用 JavaScript 在给定数字在范围内时显示消息?

在本文中,我们将检查数字是否在某个范围内,并根据得到的输出显示一条消息。 JavaScript 的此功能允许您在创建表单或任何其他文档时进行数字验证。

语法

以下是检查数字是否在范围内并显示消息的语法-

if (isNaN(number) || number < lower || number > upper){
   document.getElementById("output").innerHTML = number + " is not in range";
} else {
   document.getElementById("output").innerHTML = number + " is in range";
}

这里number是输入的数字,用于检查是否在范围内。 lower和upper是范围的下限和上限。

算法

  • 步骤1 − 使用prompt()方法输入数字。

  • 第2步 − 检查三个条件,第一个条件是否为NaN,第二个条件是否为NaN如果数字小于范围的下限,则第三次,如果数字大于范围的上限。

  • 步骤 3 -如果上述三个条件中的任何一个为真,则显示一条消息,表明该号码不在范围内,否则显示一条消息,表明该号码在范围内。

示例

在下面的示例中,我们检查输入的数字是否在 1 到 10 范围内,并显示消息。

<!DOCTYPE html>
<html>
<body>
   <div>
   <h3>Display Message if number is in Range</h3>
   <p>Click the below button to enter number.</p>
   <button onclick="display()"> click me</button>
   <p id="output"></p>
   </div>
   <script>
      function display() {
         const number = prompt('Please enter a number:');
         if (isNaN(number) || number < 1 || number > 10)
            document.getElementById("output").innerHTML = number + " is not in range";
         else
            document.getElementById("output").innerHTML = number + " is in range";
      }
   </script>
</body>
</html>

如输出窗口所示,点击“click me”按钮后,窗口会要求您输入一个数字。

在提示框中输入数字后,您将知道是否是否在给定的范围内。

尝试输入不同的数字来检查数字是否在 1 到 10 的范围内。如示例所示,如果我们输入 1 到 10 之间的任何数字,则输出为 true。上面的示例检查 3 个条件,第一,数字不为空值,第二,它不小于 1,第三,它大于 10。

示例

我们还可以如下所示编写上面的代码,它也会给出相同的输出

<!DOCTYPE html>
<html>
<body>
   <div>
   <h3>Display Message if number is in Range</h3>
   <p>Click the below button to enter number.</p>
   <button onclick="display()"> click me
   </button>
   <p id="message"></p>
   </div>
   <script>
      function display() {
         const number = prompt('Please enter a number:');
         if (number >= 1 && number <= 10)
            document.getElementById("message").innerHTML = number + " is in range";
         else
            document.getElementById("message").innerHTML = number + " is not in range";
      }
   </script>
</body>
</html>

注意- 我们可以使用此功能在表单上进行验证,例如如果我们想要从给定数据中选择出生日期或在给定选择任何整数的选项时进行验证从0到9回答。

以上就是如何使用 JavaScript 在给定数字在范围内时显示消息?的详细内容,更多请关注编程之家其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)