Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 模仿课堂计算器案例,并添加以下功能: 1. 处理除零错误 2. 处理操作符位于表达式首位的错误
Blogger Information
Blog 7
fans 0
comment 0
visits 2124
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
模仿课堂计算器案例,并添加以下功能: 1. 处理除零错误 2. 处理操作符位于表达式首位的错误
P粉276126820
Original
278 people have browsed it

模仿计算器案例

html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="calc.css">
  9.     <script src="calc.js"></script>
  10. </head>
  11. <body>
  12.     <div class="calculator">
  13.         <input type="text" class="showText" value="0" readonly>
  14.         <div class="buttList" onclick="calculator(event)">
  15.             <button>F1</button>
  16.             <button>F2</button>
  17.             <button>CE</button>
  18.             <button>AC</button>
  19.             <button>7</button>
  20.             <button>8</button>
  21.             <button>9</button>
  22.             <button>/</button>
  23.             <button>4</button>
  24.             <button>5</button>
  25.             <button>6</button>
  26.             <button>*</button>
  27.             <button>1</button>
  28.             <button>2</button>
  29.             <button>3</button>
  30.             <button>-</button>
  31.             <button>0</button>
  32.             <button>.</button>
  33.             <button>=</button>
  34.             <button>+</button>
  35.         </div>
  36.     </div>
  37. </body>
  38. </html>

css

  1. *{
  2.     padding: 0;
  3.     margin: 0;
  4.     box-sizing: border-box;
  5. }
  6. body{
  7.     background-color: aliceblue;
  8. }
  9. .calculator{
  10.     min-width: 360px;
  11.     max-width: 460px;
  12.     display:grid;
  13.     grid-template-rows: 70px,1fr;
  14.     gap: 20px;
  15.     border-radius: 8px;
  16.     place-content: center;
  17.     background-color:chocolate;
  18.     padding: 15px;
  19.     margin: 40px auto;
  21. }
  22. .calculator .showText{
  23.     font-size: 32px;
  24.     font-weight: bolder;
  25.     text-align: right;
  26.     padding: 10px;
  27.     border-radius: 8px;
  28.     background-color:rgb(213, 224, 245);
  29.     border: none;
  30.     outline: none;
  31.     box-shadow: 3px 3px 3px 0px #333 inset;
  32. }
  33. .buttList{
  34.     display: grid;
  35.     grid-template-columns: repeat(4,1fr);
  36.     grid-auto-rows: 50px;
  37.     gap: 15px;
  39. }
  40. .calculator .buttList > *{
  41.     border: none;
  42.     outline: none;
  43.     background-color:darkgray;
  44.     font-size: 32px;
  45.     border-radius: 8px;
  46.     box-shadow: 2px 2px 2px #222;
  47.     color: aliceblue;
  50. }
  51. .calculator .buttList > *:nth-child(-n+4){
  52.     font-weight: bolder;
  53.     color: #000;
  54. }
  56. .calculator .buttList > *:hover{
  57.     cursor: pointer;
  58. /* 设置透明度 */
  59.     opacity: 0.7;
  60.     background-color: bisque;
  61.     transition: 0.36s;
  62.     color: black;
  64. }

JS

  1. function calculator(ev){
  2.     //获取显示区text控件
  3.     const showText = document.querySelector('.showText')
  4.     // 判断是否点击的是button按钮
  5.     if(ev.target.tagName!=='BUTTON') return false
  6.     //获取button元素控件
  7.     const btnCur = ev.target
  8.     //得到button按钮上的text内容
  9.     let text = btnCur.textContent
  10.     //分支判断点击按钮操作
  11.     switch(text){
  12.         case 'AC':
  13.             showText.value=0
  14.         break
  15.         case 'CE':
  16.             if (showText.value.length == 1 || showText.value == '错误') {
  17.                 showText.value = 0
  18.               } else 
  19.               {
  20.                 showText.value=showText.value.slice(0,-1)    
  21.               }
  22.         break
  23.         case 'F1':
  24.         break
  25.         case 'F2':
  26.         break
  27.         case '=':
  28.          let result =  showText.value  
  29.              // 缓存结果
  30.       let t_Result = 0
  31.       try {
  32.         //判断计算器显示区计算表达式头部不能出现 / * 等字符串，如果出现显示区就显示0
  33.         if(result.slice(0,1)==='/' || result.slice(0,1)==='*' ){
  34.             showText.value=0   
  35.         }
  36.         //判断显示区计算表达式中不能出现两个以上挨着一起的运算符的字符串，只要出现一次显示区就显示0
  37.         if(result.indexOf("/*")>=0 || result.indexOf("*/")>=0 
  38.         ||result.indexOf("+*")>=0 ||result.indexOf("-*")>=0 
  39.         ||result.indexOf("*+")>=0 ||result.indexOf("*-")>=0 
  40.         ||result.indexOf("+/")>=0 ||result.indexOf("-/")>=0 
  41.         ||result.indexOf("/+")>=0 ||result.indexOf("/-")>=0 
  42.         )
  43.         {
  44.             showText.value=0  
  45.                 // showText.value="乘、除符号不能相连"
  46.             break
  47.         }
  49.         /**
  50.          * 判断计算器显示区计算表达式尾部不能出现 / * + -  等字符串，如果出现显示区就显示0
  51.          * 判断是否是除0操作,如果是显示区就显示0
  52.          */
  53.         if(
  54.             result.slice(result.length-1)==='/' ||
  55.             result.slice(result.length-1)==='*' ||
  56.             result.slice(result.length-1)==='+' ||
  57.             result.slice(result.length-1)==='-' ||
  58.             //判断是否是除0操作
  59.             result.slice(result.length-2)==='/0' 
  60.         ) {
  61.             console.log(result.slice(result.length-1));
  62.             console.log(result.slice(result.length-2));
  63.             showText.value=0
  64.                 break
  65.         }
  67.         // 计算字符串表达式
  68.         t_Result = eval(showText.value)
  70.         // 如果结果是小数,仅保留4位就可以了
  71.         if (t_Result.toString().includes('.')) {
  72.             t_Result = t_Result.toFixed(4)
  73.         // 如果小数部分出现了多余的0,应该去掉(对结果精度没影响)
  74.           t_Result = parseFloat(t_Result)
  75.         }
  76.         // 显示出结果
  77.         showText.value = t_Result
  78.       } catch {
  79.         showText.value = '错误'
  80.       }
  81.         break
  82.        default:
  83.          // 如果当前结果区显示有前导0,先清空, 防止出现前导0
  84.          if (showText.value == 0 || showText.value == '错误') showText.value = ''
  85.           showText.value += text
  86.     }
  87. }

效果显示

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post