实战：模拟计算器

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
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;
  21.             case 'CE':
  22.             if (result.value.length == 1 || result.value == '错误') {
  23.                 result.value = 0
  24.             } else {
  25.                 result.value = result.value.slice(0, -1)
  26.             }
  27.             break
  29.             // 计算
  30.             case '=':
  31.             let tmpResult = 0
  32.             try {
  33.                 result.value = result.value.replace('×', '*')
  34.                 result.value = result.value.replace('÷', '/')
  35.                 // 计算字符串表达式
  36.                 tmpResult = eval(result.value)
  38.                 // 设置小数位
  39.                 if (tmpResult.toString().includes('.')) {
  40.                 tmpResult = tmpResult.toFixed(2)
  41.                 // 去除多余的0
  42.                 tmpResult = parseFloat(tmpResult)
  43.                 }
  44.                 if(tmpResult == 'Infinity'){
  45.                     tmpResult = '错误'
  46.                 }
  49.                 // 显示出结果
  50.                 result.value = tmpResult
  51.             } catch {
  52.                 result.value = '错误'
  53.             }
  54.             break
  56.             default:
  57.             // 防止出现前导0
  58.             if (result.value == 0 || result.value == '错误') result.value = ''
  59.             console.log(result.value[-0]);
  60.             if(num.includes(result.value[result.value.length-1]) == false && num.includes(content) == false) result.value = result.value.slice(0, -1)
  61.             result.value += content
  62.         }
  63.     }    
  64. }
效果1：句首只能是数字

图1-居首只能是数字

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

图3

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

图2

总结：

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

【本文转自：韩国cn2服务器 http://www.558idc.com/kt.html欢迎留下您的宝贵建议】
更多阅读