中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項超值服

開通VIP
JS 實現(xiàn)計算器功能

括號功能未實現(xiàn),后續(xù)更

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>計算器</title>
    <style>
        body,p,input,ul,li,div{
            margin: 0;
            padding: 0;
        }
        #calc{
            position: relative;
            border-radius: 10px;
            margin: 0 auto;
            width: 400px;
            height: 500px;
            background: #ccc;
        }
        p{
            text-align: center;
        }
        .f-text{
            padding-top: 10px;
           box-sizing: border-box;
           border: 0;
            margin: 0 auto;
            font-size: 30px;
            
            text-align: right;
            width: 400px;
            height: 60px;
        }
        ul{
            list-style-type: none;
            
        }
        ul li{
            
            float: left;
            width: 90px;
            height: 50px;
            margin: 25px 10px 0 0;
            font-size: 30px;
            font-family: Arial, Helvetica, sans-serif;
           
        }
        ul li a{
            margin: 0 auto;
            display: block;
            width: 60px;
            height: 60px;
            line-height: 50px;
            box-sizing: border-box;
            border-radius: 10px;
            box-shadow: white;
            text-align: center;
            text-decoration: none;
            color: white;
            background: black;
        }
        ul li a:hover{
            cursor: pointer;
            color: saddlebrown;
        }
        #formula{
            margin-left: -400px;
            box-sizing: border-box;
            border: 0;
            margin-top: -60px;
            position: absolute;
            width: 400px;
            height: 20px;
        }
    </style>
</head>
<body>
   <div id="calc">
       <p>簡易計算器</p>
        <input class="f-text" type="text" readonly="readonly" maxlength="9" value="0" />
        
            <ul>
                <li class="btn-1"><a href="javascript:void(0)">c</a></li>
                <li class="btn-1"><a href="javascript:void(0)">%</a></li>
                <li class="btn-1"><a href="javascript:void(0)">/</a></li>
                <li class="btn-1"><a href="javascript:void(0)">x</a></li>
                <li><a href="javascript:void(0)">7</a></li>
                <li><a href="javascript:void(0)">8</a></li>
                <li><a href="javascript:void(0)">9</a></li>
                <li class="btn-1"><a href="javascript:void(0)">-</a></li>
                <li><a href="javascript:void(0)">4</a></li>
                <li><a href="javascript:void(0)">5</a></li>
                <li><a href="javascript:void(0)">6</a></li>
                <li class="btn-1"><a href="javascript:void(0)">+</a></li>
                <li><a href="javascript:void(0)">1</a></li>
                <li><a href="javascript:void(0)">2</a></li>
                <li><a href="javascript:void(0)">3</a></li>
                <li class="btn-2"><a href="javascript:void(0)">=</a></li>
                <li class="btn-3"><a href="javascript:void(0)">0</a></li>
                <li><a href="javascript:void(0)">.</a></li>
                <li><a href="javascript:void(0)">(</a></li>
                <li><a href="javascript:void(0)">)</a></li>
            </ul>
        <input id="formula" type="text" readonly="readonly" value=""/>
   </div> 
</body>
</html>
<script>
    var calc=document.getElementById("calc");
    var a=calc.getElementsByTagName("a");
    var input=calc.getElementsByTagName("input")[0];
    var formula=document.getElementById("formula");
    var s=false;
    var i;
    
    
    for(i=0;i<a.length;i++){
        a[i].onfocus=function(){
            this.blur()
        };
        a[i].onclick=function(){
            switch(this.innerHTML){
                case "c":
                input.value=0;
                formula.value="";
                break;
                case "%":
                count("%")
                break;
                case "x":
                count("*")
                break;
                case "-":
                count("-")
                break;
                case "+":
                count("+")
                break;
                case "(":
                count("(")
                break;
                case ")":
                count(")")
                break;
                case "=":
                s || (formula.value+=input.value);
                        
                input.value=eval(formula.value.replace(/\%\/\*\-\+/,''));//輸入的值進(jìn)行運(yùn)算后得到的值
               
                input.value=input.value.substr(0,10).replace("NaN",0);//計算輸入變量和輸出結(jié)果最多前10位,如果不是數(shù)字返回0
              
                s=true;
                break;
                case ".":
                if(input.value.search(/[\.\%\/\*\-\+]/)!=-1)//輸入的值為非運(yùn)算符時
                
                break;
                default:
                s && (input.value=0,formula.value="",s=false);
                input.value.length<10 &&(input.value=(input.value+this.innerHTML).replace(/^[0\%\/\*\-\+](\d)/,"$1"));
        

            }
        }
    }
    function count(d){
        
       var reg = /[\%\/\*\-\+]$/;
        if(s) 
        {   //錯誤處理
            formula.value=input.value + d; 
            input.value=d;
            s=false;
        }
        else 
        {   //正確處理
            reg.test(input.value) || (formula.value+=input.value);
            console.log('3',/[\%\/\*\-\+]$/.test(input.value));
           
            input.value=d;
            console.log("n",input.value);
            reg.test(formula.value) || (formula.value+=input.value);
            formula.value=formula.value.slice(-1)!=d ? formula.value.replace(/.$/,d):formula.value
       }
    }
</script>

  

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
CSS做的計算器
響應(yīng)式布局案例
div+css表格布局
兼容多瀏覽器頂端浮動導(dǎo)航效果
DIV+CSS布局網(wǎng)頁的實例
淘寶基礎(chǔ)版全屏輪播不居中,求助各位大神-美工經(jīng)驗分享
更多類似文章 >>
生活服務(wù)
熱點(diǎn)新聞
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服