2-11 编程练习
本节编程练习不计算学习进度,请电脑登录imooc.com操作

编程练习

小伙伴们,根据所学知识,实现一个简单的计算器,点击+-*/按钮,对两个输入框的之进行计算,并输出结果。

效果图:

温馨提示: 完成任务后,请验证是否与实践描述效果一致,如一致,恭喜您,你已经掌握此技能,否则,请重复学习视频内容。

任务

一、监听+-*/按钮点击事件,进行计算并显示结果。

提示:
  1. 分别取得2个输入框的值
  2. 把值转成数字
  3. 计算并输出

 

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. input { width: 60px; }
  8. div { margin: 10px 0 }
  9. </style>
  10. <script type="text/javascript">
  11. window.onload = function () {
  12.  
  13. // 获取元素
  14. var num1 = document.getElementById('num1');
  15. var num2 = document.getElementById('num2');
  16. var ret = document.getElementById('ret');
  17. var btns = document.getElementsByTagName('button');
  18. var p = parseInt;
  19.  
  20. //为按钮添加点击事件,计算结果
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27. }
  28. </script>
  29. </head>
  30. <body>
  31. <input id="num1" type="text"/>
  32. <input id="num2" type="text"/>
  33. <div>结果:<span id="ret"></span></div>
  34. <button>+</button>
  35. <button>-</button>
  36. <button>*</button>
  37. <button>/</button>
  38. </body>
  39. </html>
下一节