博客列表 >实战:模拟计算器

实战:模拟计算器

一个好人
一个好人原创
2023年03月29日 15:48:34570浏览

HTML文档

  1. <div class="calculator">
  2. <div class="calculate">
  3. <input class="result" type="text" value="0" readonly/>
  4. </div>
  5. <div class="btns" onclick="calculator(event)">
  6. <div class="func1">
  7. <button>Rad</button>
  8. <button>Deg</button>
  9. <button>Inv</button>
  10. <button>(</button>
  11. <button>)</button>
  12. <button>CE</button>
  13. <button>AC</button>
  14. </div>
  15. <div class="func2">
  16. <div class="func21">
  17. <button>x!</button>
  18. <button>sin</button>
  19. <button>cos</button>
  20. <button>π</button>
  21. <button>tan</button>
  22. <button>log</button>
  23. <button>e</button>
  24. <button>ln</button>
  25. <button></button>
  26. <button>EXP</button>
  27. <button>Ans</button>
  28. <button>xy</button>
  29. </div>
  30. <div class="numb">
  31. <button>7</button>
  32. <button>8</button>
  33. <button>9</button>
  34. <button>4</button>
  35. <button>5</button>
  36. <button>6</button>
  37. <button>1</button>
  38. <button>2</button>
  39. <button>3</button>
  40. <button>0</button>
  41. <button>.</button>
  42. <button>=</button>
  43. </div>
  44. <div class="func22">
  45. <button>÷</button>
  46. <button>×</button>
  47. <button>-</button>
  48. <button>+</button>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. <script src="script.js"></script>

CSS文档

  1. /* 初始化 */
  2. *{
  3. padding: 0;
  4. margin: 0;
  5. box-sizing: border-box;
  6. }
  7. body{
  8. background-color: #fff;
  9. }
  10. .calculator{
  11. min-width: 460px;
  12. max-width: 660px;
  13. height: 550px;
  14. border-radius: 15px;
  15. background-color: #666;
  16. display: grid;
  17. grid-template-rows: 150px 1fr;
  18. margin: 40px auto;
  19. }
  20. .calculator .calculate{
  21. background-color: #cecece;
  22. border: none;
  23. /* padding: 5px; */
  24. margin: 15px;
  25. display: grid;
  26. grid-template-rows: 1fr;
  27. border-radius: 15px;
  28. }
  29. input{
  30. border: none;
  31. }
  32. .calculator .calculate *{
  33. font-size: 32px;
  34. font-weight: bolder;
  35. text-align: right;
  36. padding: 6px;
  37. border: none;
  38. outline: none;
  39. border-radius: 8px;
  40. background-color: #cecece;
  41. box-shadow: 2px 2px 2px #333 inset;
  42. }
  43. .calculator .btns *{
  44. display: grid;
  45. grid-template-columns: repeat(90px, 1fr);
  46. grid-auto-rows: 50px;
  47. gap: 15px;
  48. padding: 15px;
  49. }
  50. .calculator .btns .func1{
  51. display: grid;
  52. grid-template-columns: repeat(7, 1fr);
  53. grid-auto-rows: 50px;
  54. gap: 15px;
  55. }
  56. .calculator .btns .func2{
  57. display: grid;
  58. grid-template-columns: 3fr 3fr 1fr;
  59. grid-auto-rows: 50px;
  60. /* gap: 15px; */
  61. }
  62. .calculator .btns .func2 .func21{
  63. display: grid;
  64. grid-template-columns: repeat(3, 1fr);
  65. grid-auto-rows: 50px;
  66. gap: 15px;
  67. }
  68. .calculator .btns .func2 .numb{
  69. display: grid;
  70. grid-template-columns: repeat(3, 1fr);
  71. grid-auto-rows: 50px;
  72. gap: 15px;
  73. }
  74. .calculator .btns .func22{
  75. display: grid;
  76. grid-template-columns: repeat(1fr);
  77. grid-auto-rows: 50px;
  78. gap: 15px;
  79. }
  80. .calculator .btns *{
  81. border-radius: 8px;
  82. font-size: 22px;
  83. font-weight: 500px;
  84. border: none;
  85. }
  86. button{
  87. border-radius: 15px;
  88. color: #888;
  89. border: none;
  90. outline: none;
  91. box-shadow: 2px 2px 2px #000;
  92. }
  93. .calculator .calculate .result {
  94. font-size: 32px;
  95. font-weight: bolder;
  96. text-align: right;
  97. }
  98. button:hover {
  99. cursor: pointer;
  100. opacity: 0.7;
  101. color: white;
  102. transition: 0.3s;
  103. background-color: lightblue;
  104. }

Javascript文档

  1. function calculator(ev){
  2. const result = document.querySelector('.result')
  3. if (ev.target.tagName !== 'BUTTON') return false
  4. const curBtn = ev.target
  5. // 获取按钮内容
  6. let content = curBtn.textContent
  7. let num = ['0','1','2','3','4','5','6','7','8','9']
  8. // eval('字符串表达式'): 用于计算
  9. if(result.value == 0){
  10. if(num.includes(content)){
  11. result.value = content
  12. }else{
  13. result.value = 0
  14. }
  15. }else{
  16. switch (content) {
  17. case 'AC':
  18. result.value = 0
  19. break;
  20. case 'CE':
  21. if (result.value.length == 1 || result.value == '错误') {
  22. result.value = 0
  23. } else {
  24. result.value = result.value.slice(0, -1)
  25. }
  26. break
  27. // 计算
  28. case '=':
  29. let tmpResult = 0
  30. try {
  31. result.value = result.value.replace('×', '*')
  32. result.value = result.value.replace('÷', '/')
  33. // 计算字符串表达式
  34. tmpResult = eval(result.value)
  35. // 设置小数位
  36. if (tmpResult.toString().includes('.')) {
  37. tmpResult = tmpResult.toFixed(2)
  38. // 去除多余的0
  39. tmpResult = parseFloat(tmpResult)
  40. }
  41. if(tmpResult == 'Infinity'){
  42. tmpResult = '错误'
  43. }
  44. // 显示出结果
  45. result.value = tmpResult
  46. } catch {
  47. result.value = '错误'
  48. }
  49. break
  50. default:
  51. // 防止出现前导0
  52. if (result.value == 0 || result.value == '错误') result.value = ''
  53. console.log(result.value[-0]);
  54. if(num.includes(result.value[result.value.length-1]) == false && num.includes(content) == false) result.value = result.value.slice(0, -1)
  55. result.value += content
  56. }
  57. }
  58. }

效果1:句首只能是数字

图1-居首只能是数字

效果2:不能连续出现符合,否则替换掉前面的符号

图3

效果3:除以零时显示“错误”

图2

总结:

作业要求的效果基本实现了,但不够优雅、简洁;大部分按键的功能还没添加,以后再完善吧!

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议