经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » XHTML » 查看文章
html输入两个数实现加减乘除功能_HTML/Xhtml
来源:jb51  时间:2021/7/5 8:34:28  对本文有异议

一、parseFloat() 函数
 

在网页中制作一个简单的计算器,在文本框输入两个数,能够实现两个数的加减乘除。
parseFloat() 函数可解析一个字符串,并返回一个浮点数。
该函数指定字符串中的首个字符是否是数字。如果是,则对字符
串进行解析,直到到达数字的末端为止,然后以数字返回该数字,
而不是作为字符串。
语法:parseFloat(string);

二、JavaScript 全局属性  

属性 描述
Infinity 代表正的无穷大的数值。
NaN 指示某个值是不是数字值。
undefined 指示未定义的值。

三、完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <script type="text/javascript">
  9. function cal(){
  10. var nums = document.getElementsByName("num");
  11. var sz = document.getElementsByName("js");
  12. var result = document.getElementsByName("rs");
  13. var n1 = parseFloat(nums[0].value);
  14. var n2 = parseFloat(nums[1].value);
  15. /*parseFloat() 函数可解析一个字符串,并返回一个浮点数。
  16. 该函数指定字符串中的首个字符是否是数字。如果是,则对字符
  17. 串进行解析,直到到达数字的末端为止,然后以数字返回该数字,
  18. 而不是作为字符串。
  19. */
  20. switch(sz[0].value){
  21. case "add" :
  22. result[0].value = n1 + n2 ;
  23. break;
  24. case "min" :
  25. result[0].value = n1 - n2 ;
  26. break;
  27. case "mul" :
  28. result[0].value = n1 * n2 ;
  29. break;
  30. case "div" :
  31. result[0].value = n1/n2;
  32. break;
  33. }
  34. }
  35. </script>
  36. </head>
  37. <body>
  38. <div align="center">
  39. <input type="text" name="num" value="" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />
  40. <select name="js" size="1">
  41. <option value="add">+</option>
  42. <option value="min">-</option>
  43. <option value="mul">*</option>
  44. <option value="div">/</option>
  45. </select>
  46. <input type="text" name="num" value=""onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />
  47. =
  48. <input type="text" name="rs" value=""/><br>
  49. <button id="btn"onclick="cal()">计算</button>
  50. </div>
  51. </body>
  52. </html>

效果展示:

在这里插入图片描述

到此这篇关于html输入两个数实现加减乘除的文章就介绍到这了,更多相关html加减乘除内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号