模仿了朱老师讲的计算器案例,并实现用自己的方

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网

通过实际操作,基本熟悉计算器代码,并且可以自行写出来.

css代码
  1. /* 计算器css */
  2. * {
  3.     padding: 0;
  4.     margin: 0;
  5.     box-sizing: border-box;
  6.   }
  7.   body {
  8.     background-color: #eee;
  9.   }
  10. .calculator{
  11.     min-width: 360px;
  12.     max-width: 460px;
  13.     /* border: 1px solid ; */
  14.     display: grid;
  15.     gap: 10px;
  16.     grid-template-rows: 50px 1fr;
  17.     margin: 20px auto;
  18.     padding: 10px;
  19.     box-shadow: 2px 2px 2px  #333;
  20.     border-radius: 5px;
  21.     background-color: #666;
  22. }
  23. .calculator .result{
  24.    background-color: #cecece;
  25.    text-align: right;
  26.    font-size: 32px;
  27.    border: none;
  28.    outline: none;
  29.    padding: 5px;
  30.    font-weight: bolder;
  31.    box-shadow: 2px 2px 2px  #333 inset;
  32.    border-radius: 5px;
  34. }
  35. .calculator .btn{
  36.     display: grid;
  37.     grid-template-columns: repeat(4,1fr);
  38.     gap:10px;
  39.     grid-auto-rows: 60px;
  41. }
  42. .calculator .btn button:nth-child(-n+4)
  43. {
  44.     background-color: #fff;
  45. }
  47. .calculator .btn button{
  48.     border-radius: 8px;
  49.     background-color: #cecece;
  50.     box-shadow: 2px 2px 2px  #000 ;
  51.     font-size: 32px;
  52.     font-weight: bolder;
  53. }
  54. .calculator .btn button:hover{
  55.     cursor: pointer;
  56.     color: #000;
  57.     /* 透明度 */
  58.     opacity: 0.7;
  59.     transition: 0.3s;
  60. }
  61. .calculator .btn button:nth-child(-n+4):hover{
  62.     color: #000;
  63. }
js代码
  1. function  calculator(ev){
  2.     // 获取到结果区
  3.     let result = document.querySelector('.result')
  4.     //获取到时间触发者的标签是否是button
  5.     // console.log(ev.target.tagName);
  6.     // console.log(ev);
  7.     //获取到事件触发者target的标签tagName不等于BUTTON 直接返回false
  8.     if (ev.target.tagName != 'BUTTON') return false
  9.     //获取标签的值
  10.     let content = ev.target.textContent
  11.     // console.log(content);
  13.     switch(content){
  14.         //元素的值是AC 直接清零
  15.         case 'AC' :
  16.             result.value = 0
  17.             break
  18.         // CE 是退格
  19.          case 'CE':
  20.              if(result.value.length==1 || result.value=='错误')
  21.              {
  22.                 result.value = 0
  23.              }else{
  24.                 //退格:(0,-1)表示从起始值到最后一个值,获取字符串的子串,忽略最后一个字符
  25.                 result.value = result.value.slice(0,-1)
  26.              }
  28.             break
  29.         //通过eval():计算字符串
  31.         case '=':
  32.             // toFix()必须是number数字类型
  33.             let tmpResult = 0
  34.             // console.log(typeof tmpResult);
  35.             try{
  36.                 //因为eval只能识别*,所以要把x替换成*
  37.                 result.value = result.value.replace('x','*') 
  38.                 tmpResult = eval(result.value)
  39.                 if(tmpResult.toString().includes('.'))
  40.                 tmpResult = tmpResult.toFixed(5)
  41.                 //小数部分多余的0去掉
  42.                 tmpResult = parseFloat(tmpResult)
  43.                 //如果除0出现无穷大Infinity,提示错误
  44.                 if(tmpResult == Infinity)
  45.                 tmpResult = '错误'
  46.                 result.value = tmpResult
  48.             }
  49.             catch{
  50.                result.value = '错误'
  51.             }
  52.             break
  53.         default:
  54.             // if(result.value=='+' || result.value=='-'|| result.value=='x' || result.value=='/')
  55.             if(result.value == 0 || result.value=='错误' || result.value=='+' || result.value=='-'|| result.value=='x' || result.value=='/')
  56.             result.value=''
  57.             //默认显示输入的内容
  58.            result.value += content
  59.     }
  61. }
其中处理除零错误
  1. //如果除0出现无穷大Infinity,提示错误
  2.                 if(tmpResult == Infinity)
  3.                 tmpResult = '错误'
处理操作符位于表达式首位的错误
  1. if(result.value == 0 || result.value=='错误' || result.value=='+' || result.value=='-'|| result.value=='x' || result.value=='/')
  2.             result.value=''
图片效果如下

【本文来自：美国大带宽服务器 http://www.558idc.com/mg.html提供，感恩】
更多阅读