博主信息
博文 10
粉丝 0
评论 0
访问量 7347
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
js简单计算器和一个深坑
人生如梦
原创
938人浏览过

今天用js写了一个简单的计算器,别的都还好说,遇到一个最大的坑应该是input输入的数字拿到之后竟然为string类型,type=”number”也不行!坑坑坑!!!

上代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>计算器</title>
  6. </head>
  7. <body>
  8. <input type="text" name="num1" id="num1" value="">
  9. <select name="ys" id="ys">
  10. <option value="+">+</option>
  11. <option value="-">-</option>
  12. <option value="*">*</option>
  13. <option value="/">/</option>
  14. <option value="%">%</option>
  15. </select>
  16. <input type="text" name="num2" id="num2" value="">
  17. <button onclick="js()">计算</button>
  18. <p id="res"></p>
  19. <script>
  20. function js() {
  21. var res = '',
  22. num1 = document.getElementById('num1').value,
  23. num2 = document.getElementById('num2').value,
  24. ysf = document.getElementById('ys').value,
  25. resObj = document.getElementById('res');
  26. console.log(num1);
  27. console.log(typeof (num1));
  28. if (num1.length < 1) {
  29. res += 'num1不能为空!';
  30. }
  31. if (num2.length < 1) {
  32. res += 'num2不能为空!'
  33. }
  34. num1 = parseFloat(num1);
  35. num2 = parseFloat(num2);
  36. if (isNaN(num1)) {
  37. res += 'num1不能为非数字!';
  38. }
  39. if (isNaN(num2)) {
  40. res += 'num2不能为非数字';
  41. }
  42. if (res.length == 0) {
  43. switch (ysf) {
  44. case '+':
  45. res = num1 + num2;
  46. break;
  47. case '-':
  48. res = num1 - num2;
  49. break;
  50. case '*':
  51. res = num1 * num2;
  52. break;
  53. case '/':
  54. if (num2 == 0) {
  55. res += '除数不能为零!';
  56. } else {
  57. res = num1 / num2;
  58. }
  59. break;
  60. case '%':
  61. if (num2 == 0) {
  62. res += '除数不能为零!';
  63. } else {
  64. res = num1 % num2;
  65. }
  66. break;
  67. }
  68. }
  69. resObj.innerText = res
  70. }
  71. </script>
  72. </body>
  73. </html>

批改老师:PHPzPHPz

批改状态:合格

老师批语:type=”number”只是限制输入的为数字
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学