广告位联系
返回顶部
分享到

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

HTML/Xhtml 来源:转载 作者:秩名 发布时间:2021-07-03 08:43:27 人浏览
摘要

一、parseFloat() 函数 在网页中制作一个简单的计算器,在文本框输入两个数,能够实现两个数的加减乘除。 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(/^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>

效果展示:

在这里插入图片描述


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://www.jb51.net/web/780972.html
相关文章
  • HTML静态页面获取url参数和UserAgent的实现代码

    HTML静态页面获取url参数和UserAgent的实现代码
    接技术支持小伙伴信:有用户反馈app在华为设备上下载不了,以为是服务器覆盖的范围不够或服务器挂了,直到另一个客服同事发来一个录
  • html网页引入svg图片的4种方式总结
    web应用开发使用svg图片,总结了下,可以有如下4种方式: 1. 直接插入页面。 2. img标签引入。 3. css引入。 4. object标签引入。 1. 直接插入页
  • html中两种获取标签内的值的方法介绍
    获取标签中value的值 使用的javascript获取,所以肯定是包含在 script 标签里的,也需要引入jquery 标签示例: 1 input id=goodsCount type=text size=2 re
  • HTML基本元素标签介绍

    HTML基本元素标签介绍
    一、什么是HTML HTML(Hypertext Markup Language):即超文本标记语言,是一种用来设计网页的标记语言,用该语言编写的文件,以.html或.htm为后缀
  • HTML中的表格元素介绍

    HTML中的表格元素介绍
    表格元素的作用:用来格式化显示数据。 一、表格的基本结构 表格的基本语法: TABLE border=设置表格边框尺寸大小 width= cellpadding= cellspaning
  • HTML中的表单元素介绍

    HTML中的表单元素介绍
    表单元素概述 表单(Form),用于收集用户信息、提交用户请求等 处理过程 1、设计表单,并放入一些输入域 2、网站访问者在自己的计算机
  • HTML怎么设置下划线?html文字加下划线方法

    HTML怎么设置下划线?html文字加下划线方法
    HTML中的下划线曾经是将文本包含在u/u标签中的问题,但是这种方法已被放弃,而更倾向于使用更多功能的CSS。一般来说,下划线被认为是引
  • 关于HTML编码导致的乱码问题介绍

    关于HTML编码导致的乱码问题介绍
    今天一个学弟问了一个问题,它写的HTML代码打开显示的是乱码。 然后就给我发来了代码。 就一个HTML文件和一个文件夹,打开一看,很简单
  • 纯html+css实现Element loading效果的代码

    纯html+css实现Element loading效果的代码
    这是 Element UI loading 组件的效果图,看起来很酷,我们来实现一下! 分析 动画由两部分组成: 蓝色的弧线由点伸展成一个圆,又从圆收缩成
  • HTML+CSS实现导航条下拉菜单的代码

    HTML+CSS实现导航条下拉菜单的代码
    代码中的图片可以自己换的 下拉菜单HTML代码 header class=header div class=header_left img src=img/logo.jpg /div div class=header_right div class=number_right img src
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计