html输入两个数实现加减乘除功能_HTML/Xhtml_网页制作

来源:脚本之家  责任编辑:小易  

一、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加减乘除内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!


  • 本文相关:
  • html5 外链式实现加减乘除的代码
  • 求助:html代码问题,怎么做一个加减乘除的简单计算器?如何创建...
  • 怎么用HTML和javascript做出一个加减乘除计算器?
  • php简单实现加减乘除计算器
  • 如何用VB做一个简单计算器 要求实现加减乘除乘方开方功能
  • 用php简单实现加减乘除计算器
  • html中javascript计算加减乘除,哪位大哥帮帮忙啊!
  • 如何用VB做一个简单计算器 要求实现加减乘除乘方开方功能
  • 标签是计算器 要求单位数加减乘除等于就行
  • 2 2 7 9这四个数通过加减乘除如何算得24
  • 奥数题2个3 2个8 加减乘除括号等于24 没个数字只能用一次 符...
  • 用php做个计算器(加减乘除),两个文本框输入数字,第三个输出结...
  • 在做一个网页计算器,如何实现单击加减乘除号码时候文本框里...
  • 1.2.8.5.四个数加减乘除可以等于24吗
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html/xhtml乘除加减htmlhtml5 外链式实现加减乘除的代码html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧iframe标签用法详解(属性、透明、自适应高度)16进制颜色代码(完全)40多个漂亮的网页表单设计实例定义input type=file 样式的方法html中让表单input等文本框为只读不可编辑的方法html中设置锚点定位的几种常见方法html 几种特别分割线特效 html iframe 用法总结收藏html 超级链接详细讲解网页嵌入百度地图和使用百度地图api自定义地图的详细html输入两个数实现加减乘除功能dns-prefetch是什么 前端优化:dns预解析提升页面速度纯html+css实现element loading效果纯html+css实现奥运五环的示例代码html+css实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved