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

发布时间:2022-04-12 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了html输入两个数实现加减乘除功能脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

一、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(/^\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>

效果展示:

在这里插入图片描述

到此这篇关于html输入两个数实现加减乘除的文章就介绍到这了,更多相关html加减乘除内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本宝典!

脚本宝典总结

以上是脚本宝典为你收集整理的html输入两个数实现加减乘除功能全部内容,希望文章能够帮你解决html输入两个数实现加减乘除功能所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: