html输入两个数实现加减乘除功能

最新推荐文章于 2023-05-09 15:20:35 发布

云南仟龙Mark

最新推荐文章于 2023-05-09 15:20:35 发布

阅读量3.8k

点赞数 1

原文链接：https://blog.51cto.com/u_15111999/3409767

版权

在网页制作过程中制作一个简单计算器功能是非常常见的需求，通过在文本输入两个数，能够实现两个数的加减乘除，主要通过parseFloat() 函数，其语法介绍可以参考下本文

一、parseFloat() 函数
在网页中制作一个简单的计算器，在文本框输入两个数，能够实现两个数的加减乘除。
parseFloat() 函数可解析一个字符串，并返回一个浮点数。
该函数指定字符串中的首个字符是否是数字。如果是，则对字符
串进行解析，直到到达数字的末端为止，然后以数字返回该数字，
而不是作为字符串。
语法：parseFloat(string)；

二、JavaScript 全局属性

属性描述 Infinity 代表正的无穷大的数值。 NaN 指示某个值是不是数字值。 undefined 指示未定义的值。

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript">
       function cal(){
           var nums = document.getElementsByName("num");
           var sz = document.getElementsByName("js");
           var result = document.getElementsByName("rs");
           var n1 = parseFloat(nums[0].value);
           var n2 = parseFloat(nums[1].value);
           /*parseFloat() 函数可解析一个字符串，并返回一个浮点数。
           该函数指定字符串中的首个字符是否是数字。如果是，则对字符
           串进行解析，直到到达数字的末端为止，然后以数字返回该数字，
           而不是作为字符串。
        */
            switch(sz[0].value){
            case "add" :
            result[0].value = n1 + n2 ;
            break;
            case "min" :
            result[0].value = n1 - n2 ;
            break;
            case "mul" :
            result[0].value = n1 * n2 ;
            break;
            case "div" :
            result[0].value = n1/n2;
            break;
              }
          }
      </script>
</head>
<body>
    <div align="center">
        <input type="text" name="num" value="" onkeyup="value=value.replace(/www.qlyl1688.com ^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />
        <select name="js" size="1">
            <option value="add">+</option>
            <option value="min">-</option>
            <option value="mul">*</option>
            <option value="div">/</option>
        </select>
   <input type="text" name="num" value=""onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />
  =
   <input type="text" name="rs" value=""/><br>
   <button id="btn"onclick="cal()">计算</button>
</div>
</body>
</html>

效果展示:

watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=

到此这篇关于html输入两个数实现加减乘除的文章就介绍到这了，希望大家学有所成，多多关注脚本之家。

云南仟龙Mark

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
html输入两个数实现加减乘除功能

在网页制作过程中制作一个简单计算器功能是非常常见的需求，通过在文本输入两个数，能够实现两个数的加减乘除，主要通过parseFloat() 函数，其语法介绍可以参考下本文一、parseFloat() 函数在网页中制作一个简单的计算器，在文本框输入两个数，能够实现两个数的加减乘除。parseFloat() 函数可解析一个字符串，并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。语法：parseFlo
复制链接

扫一扫