plus.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. </head>
  7. <body>
  8. <table>
  9. <tr>
  10. <td><input type="button" value="add" onclick="setOp('+', 'add');"/></td>
  11. <td><input type="button" value="miner" onclick="setOp('-', 'miner');"/></td>
  12. <td><input type="button" value="times" onclick="setOp('*', 'times');"/></td>
  13. <td><input type="button" value="divide" onclick="setOp('/', 'divide');"/></td>
  14. </tr>
  15. </table>
  16. <table id="tb_calc" style="display:none;">
  17. <tr>
  18. <td> <input id="x" type="text" style="width:100px" value="" name="x" /></td>
  19. <td> <lable id="op" name="op"></lable> </td>
  20. <td> <input id="y" type="text" style="width:100px" value="" name="y" /> </td>
  21. <td> <input id="opTips" type="button" value="" onclick="calc();"/> </td>
  22. <td> <lable id="z" name="z"></lable> </td>
  23. </tr>
  24. </table>
  25. <script type="application/javascript">
  26. function setOp(op, opTips)
  27. {
  28. var tb=document.getElementById("tb_calc");
  29. tb.style.display = "none";
  30. document.getElementById("x").value = "";
  31. document.getElementById("y").value = "";
  32. document.getElementById("z").innerText = "";
  33. document.getElementById("op").innerText = op;
  34. document.getElementById("opTips").value = opTips;
  35. tb.style.display = "block";
  36. }
  37. function calc()
  38. {
  39. var x = parseInt(document.getElementById("x").value);
  40. var y = parseInt(document.getElementById("y").value);
  41. var op = document.getElementById("op").innerText;
  42. var z = "";
  43. switch(op)
  44. {
  45. case '+':
  46. z = x + y;
  47. break;
  48. case '-':
  49. z = x - y;
  50. break;
  51. case '*': ;
  52. z = x * y;
  53. break;
  54. case '/': ;
  55. z = x / y;
  56. break;
  57. default:
  58. z = '';
  59. }
  60. console.log(x, op, y, '=', z);
  61. document.getElementById("z").innerText = z;
  62. }
  63. </script>
  64. </body>
  65. </html>