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