HTML+CSS+JS实现计算机功能（一）https://developer.aliyun.com/article/1382621
界面如下：
2.通过JS实现计算器功能
- 在需要实现功能的地方添加相应的函数点击事件
1. 2. <button onclick="back1()">BK </button> <button onclick="clearerr()">CE </button> <button onclick="clear1()">C </button> <button onclick="inputStr('(')">( </button> <button onclick="inputStr(')')">) </button> <br> 3. <button onclick="inputStr(7)">7 </button> <button onclick="inputStr(8)" >8 </button> <button onclick="inputStr(9)">9 </button> <button onclick="inputStr('*')">* </button> <button onclick="inputStr('/')">/ </button> <br> 4. <button onclick="inputStr(4)">4 </button> <button onclick="inputStr(5)">5 </button> <button onclick="inputStr(6)">6 </button> <button onclick=inputStr('%')>% </button> <button onclick="reciprocal()">1/x </button> <br> 5. <button onclick="inputStr(1)">1 </button> <button onclick="inputStr(2)">2 </button> <button onclick="inputStr(3)">3 </button> <button onclick="inputStr('-')">- </button> 6. <button onclick="inputStr(0)">0 </button> <button onclick="inputStr('.')">. </button> <button onclick="inputStr('+')">+ </button> 7. <button onclick="equal()">= </button> • 1
- 对函数进行初始化
1. <script> 2. window.οnlοad= function(){ 3. // 初始化内容 4. var res = eval( "(1+4)*2"); 5. console.log(res); 6. //打印进行测试 7. } 8. </script> • 1
- 实现输入框的输入（数字、小数点、运算符、括号）
1. <input id= "cin" class= "input"> 2. 3. 4. 5. <script> 6. function inputStr(c) { 7. var cin = document.getElementById( "cin"); 8. var val = cin.value + c; 9. cin.value = val; 10. } 11. </script> • 1
- 等于号的实现
1. function equal() { 2. var cin = document.getElementById( "cin"); 3. var val = cin.value; 4. var res = eval(val); 5. cin.value = res; 6. } • 1
- 清屏C 、退格BK、错误回退CE的实现
1. function clear1() { 2. var cin = document.getElementById( "cin"); 3. cin.value = ""; 4. // if(cin.value.length>0){ 5. // document.getElementById("cin").value = ""; 6. // } 7. } 8. function back1() { 9. var cin = document.getElementById( "cin"); 10. cin.value = cin.value.substr( 0,cin.value.length -1); 11. } 12. function clearerr() { 13. var cin = document.getElementById( "cin"); 14. var val = cin.value; 15. var index = val.lastIndexOf( "-"); 16. if(index=== -1){ 17. index = val.lastIndexOf( "+"); 18. } 19. if(index=== -1){ 20. index = val.lastIndexOf( "*"); 21. } 22. if(index=== -1){ 23. index = val.lastIndexOf( "/"); 24. } 25. if(index!== -1){ 26. val = val.substring( 0,index+ 1); 27. } 28. 29. cin.value = val; 30. } • 1
- 倒数的实现
1. function reciprocal() { 2. var cin = document.getElementById( "cin"); 3. var rst = 1/cin.value; 4. cin.value = rst; 5. } • 1
目前 查看、编辑、帮助以及按钮的首行功能还未实现，可自行添加。
