本文运用前端代码实现一个简单的计算器界面，并通过JS实现了基本的运算功能。（加、减、乘、除、清屏/退格、取余、取倒） 需要源代码的可以加下面的QQ群，里面有各种学习资料，期待大家的加入！
点我进群 一起学习交流！(群里有许多的学习资料，我做过的一些网页我都上传在群里了，需要的直接下载就可以了)
1.编写前端界面
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <title>我的计算器 </title> 6. <style> 7. .containor{ 8. border: 1px solid black; 9. background-color: #fafafa; 10. height: 380px; 11. width: 296px; 12. margin: auto; 13. margin-top: 40px; 14. } 15. .top{ 16. background-color: lightgray; 17. height: 30px; 18. } 19. a{ 20. display: block; 21. float: left; 22. font-size: 8px; 23. height: 26px; 24. padding: 0 6px; 25. margin-left: 6px; 26. line-height: 26px; 27. } 28. 29. a :hover{ 30. background-color: dimgray; 31. color: white; 32. cursor: default; 33. } 34. 35. .input{ 36. width: 86%; 37. height: 60px; 38. padding: 4px; 39. margin: 0 auto; 40. margin-top: 12px; 41. } 42. .input :focus{ 43. outline: none; 44. } 45. button{ 46. width: 50px; 47. height: 30px; 48. margin: 2px; 49. text-align: center; 50. font-size: 10px; 51. border: 0.5px solid gray; 52. 53. } 54. button :hover{ 55. border: 1px solid gray; 56. background-color: #ffaa55; 57. outline: none; 58. } 59. .bottom{ 60. width: 100%; 61. height: 30px; 62. background-color:lightgray; 63. color: white; 64. position: relative; 65. margin-top: 56px; 66. } 67. </style> 68. </head> 69. <body> 70. <div class="containor"> 71. <div class="top"> 72. <a>查看（V） </a> 73. <a style="margin-left: 40px;">编辑（E） </a> 74. <a style="margin-left: 40px;">帮助（H） </a> 75. </div> 76. <div style="text-align: center"> 77. <input id="cin" class="input"> 78. </div> 79. 80. <div style="margin-left: 2px;"> 81. <div style="margin:20px 10px;height:160px;"> 82. <div style="float: left;"> 83. <div> 84. <button>MC </button> <button>MR </button> <button>MS </button> <button>M+ </button> <button>M- </button> <br> 85. <button>BK </button> <button>CE </button> <button>C </button> <button >( </button> <button>) </button> <br> 86. <button>7 </button> <button>8 </button> <button>9 </button> <button >* </button> <button>/ </button> <br> 87. <button>4 </button> <button>5 </button> <button>6 </button> <button >% </button> <button>1/x </button> <br> 88. </div> 89. <div style="float: left;"> 90. <button>1 </button> <button>2 </button> <button>3 </button> <button>- </button> <br> 91. <button style="width: 104px">0 </button> <button>. </button> <button>+ </button> 92. </div> 93. <div style="float: left;"> 94. <button style="height: 64px;margin-top: 2px">= </button> 95. </div> 96. </div> 97. 98. </div> 99. </div> 100. <div class="bottom"> 101. 102. </div> 103. </div> 104. 105. </body> 106. </html>
HTML+CSS+JS实现计算机功能（二）https://developer.aliyun.com/article/1382622
