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发光分享按钮的实现教程
Sep 06 HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
关于CSS浮动与取消浮动的问题
html5调用摄像头实例代码
Jun 28 #HTML / CSS
CSS 伪元素::marker详解
深入理解margin塌陷和margin合并的解决方案
CSS实现章节添加自增序号的方法
CSS变量实现主题切换的方法
Jun 23 #HTML / CSS
You might like
php的mssql数据库连接类实例
2014/11/28 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
鼠标事件延时切换插件
2011/03/12 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
Flask-Mail用法实例分析
2018/07/21 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
护理工作感言
2014/01/16 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
廉洁自律个人总结
2015/02/14 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
《春酒》教学反思
2016/02/22 职场文书
导游词之江南周庄
2019/12/06 职场文书