一、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>
效果展示: