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


Posted in HTML / CSS onJuly 01, 2021

一、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 / CSS 相关文章推荐
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
详解CSS玩转图片Base64编码
May 25 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
关于CSS浮动与取消浮动的问题
html5调用摄像头实例代码
Jun 28 #HTML / CSS
CSS 伪元素::marker详解
深入理解margin塌陷和margin合并的解决方案
CSS实现章节添加自增序号的方法
CSS变量实现主题切换的方法
Jun 23 #HTML / CSS
You might like
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python Property属性的2种用法
2015/06/21 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
python实现图片压缩代码实例
2019/08/12 Python
Pytorch中.new()的作用详解
2020/02/18 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
一名毕业生的自我鉴定
2013/12/04 职场文书
电话销售经理岗位职责
2013/12/07 职场文书
大四本科生的自我评价
2013/12/30 职场文书
自我评价格式
2014/01/06 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
高三学习决心书
2014/03/11 职场文书
经典导游欢迎词
2015/01/26 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
JavaScript异步操作中串行和并行
2021/11/20 Javascript
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技