模仿课堂计算器案例,并添加以下功能: 1. 处理除

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
模仿计算器案例
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. }
效果显示

【文章原创作者：盐城网站制作公司 http://www.1234xp.com/yancheng.html 欢迎留下您的宝贵建议】
更多阅读