亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

通過(guò)實(shí)際操作,基本熟悉計(jì)算器代碼,并且可以自行寫(xiě)出來(lái).

css代碼

/* 計(jì)算器css */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  body {
    background-color: #eee;
  }
.calculator{
    min-width: 360px;
    max-width: 460px;
    /* border: 1px solid ; */
    display: grid;
    gap: 10px;
    grid-template-rows: 50px 1fr;
    margin: 20px auto;
    padding: 10px;
    box-shadow: 2px 2px 2px  #333;
    border-radius: 5px;
    background-color: #666;
}
.calculator .result{
   background-color: #cecece;
   text-align: right;
   font-size: 32px;
   border: none;
   outline: none;
   padding: 5px;
   font-weight: bolder;
   box-shadow: 2px 2px 2px  #333 inset;
   border-radius: 5px;
}
.calculator .btn{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap:10px;
    grid-auto-rows: 60px;
}
.calculator .btn button:nth-child(-n+4)
{
    background-color: #fff;
}
.calculator .btn button{
    border-radius: 8px;
    background-color: #cecece;
    box-shadow: 2px 2px 2px  #000 ;
    font-size: 32px;
    font-weight: bolder;
}
.calculator .btn button:hover{
    cursor: pointer;
    color: #000;
    /* 透明度 */
    opacity: 0.7;
    transition: 0.3s;
}
.calculator .btn button:nth-child(-n+4):hover{
    color: #000;
}

js代碼

function  calculator(ev){
    // 獲取到結(jié)果區(qū)
    let result = document.querySelector('.result')
    //獲取到時(shí)間觸發(fā)者的標(biāo)簽是否是button
    // console.log(ev.target.tagName);
    // console.log(ev);
    //獲取到事件觸發(fā)者target的標(biāo)簽tagName不等于BUTTON 直接返回false
    if (ev.target.tagName != 'BUTTON') return false
    //獲取標(biāo)簽的值
    let content = ev.target.textContent
    // console.log(content);
    switch(content){
        //元素的值是AC 直接清零
        case 'AC' :
            result.value = 0
            break
        // CE 是退格
         case 'CE':
             if(result.value.length==1 || result.value=='錯(cuò)誤')
             {
                result.value = 0
             }else{
                //退格:(0,-1)表示從起始值到最后一個(gè)值,獲取字符串的子串,忽略最后一個(gè)字符
                result.value = result.value.slice(0,-1)
             }
            break
        //通過(guò)eval():計(jì)算字符串
        case '=':
            // toFix()必須是number數(shù)字類型
            let tmpResult = 0
            // console.log(typeof tmpResult);
            try{
                //因?yàn)閑val只能識(shí)別*,所以要把x替換成*
                result.value = result.value.replace('x','*') 
                tmpResult = eval(result.value)
                if(tmpResult.toString().includes('.'))
                tmpResult = tmpResult.toFixed(5)
                //小數(shù)部分多余的0去掉
                tmpResult = parseFloat(tmpResult)
                //如果除0出現(xiàn)無(wú)窮大Infinity,提示錯(cuò)誤
                if(tmpResult == Infinity)
                tmpResult = '錯(cuò)誤'
                result.value = tmpResult
            }
            catch{
               result.value = '錯(cuò)誤'
            }
            break
        default:
            // if(result.value=='+' || result.value=='-'|| result.value=='x' || result.value=='/')
            if(result.value == 0 || result.value=='錯(cuò)誤' || result.value=='+' || result.value=='-'|| result.value=='x' || result.value=='/')
            result.value=''
            //默認(rèn)顯示輸入的內(nèi)容
           result.value += content
    }
}

其中處理除零錯(cuò)誤

//如果除0出現(xiàn)無(wú)窮大Infinity,提示錯(cuò)誤
                if(tmpResult == Infinity)
                tmpResult = '錯(cuò)誤'

處理操作符位于表達(dá)式首位的錯(cuò)誤

if(result.value == 0 || result.value=='錯(cuò)誤' || result.value=='+' || result.value=='-'|| result.value=='x' || result.value=='/')
            result.value=''

圖片效果如下

批改老師：PHPz

批改狀態(tài)：合格

老師批語(yǔ)：