简单计算器的实现 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器的实现</title>
    <style>
        .calculator{
            width: 500px;
            min-height:500px;
        }
        .resulte,.content{
            width:100%;
        }
        .content {
            display: flex;
            margin-top: 20px;
        }
        .content .left,.content .right{
            flex:1;
        }
        .content .left{
            border: 1px solid red;
        }
        .content .right{
            border:1px solid blue;
        }
        button,.num-input{
            width: 50px;
            height: 50px;
            font-size: 18px;
        }

    </style>
</head>
<body>
    <div class="calculator">
        <div class="resulte">
            <input type="text" id="process">
            <input type="text" placeholder="计算结果" id="result"/>
        </div>
        <div class="content">
            <div class="left">
                <input class="num-input" type="button"  onclick="cal(this)"/>
                <input class="num-input" type="button"   onclick="cal(this)"/>
                <input class="num-input" type="button"   onclick="cal(this)"/>
                <input class="num-input" type="button"   onclick="cal(this)"/>
                <input class="num-input" type="button"   onclick="cal(this)"/>
                <input class="num-input" type="button"  onclick="cal(this)"/>
                <input class="num-input" type="button"  onclick="cal(this)"/>
                <input class="num-input" type="button" onclick="cal(this)"/>
                <input class="num-input" type="button" onclick="cal(this)"/>
            </div>
            <div class="right">
                <button  onclick="operate(this)" >+</button>
                <button onclick="operate(this)">-</button>
                <button onclick="operate(this)">*</button>
                <button onclick="operate(this)">/</button>
                <button onclick="operateResult(this)">=</button>
                <button onclick="del(this)">del</button>


                
            </div>
        </div>
    </div>

<script>



window.onload=function(){

    // 产生0-9的随机数   num.splice 返回新数组，原数组本身也发生变化
    //为什么一定要*数组的长度
    var num = [0,1,2,3,4,5,6,7,8,9];
    var random_array=[];
    while(num.length>0){
        var random_num ='';

        random_num = num.splice(parseInt(Math.random()*num.length),1)[0];

        random_array.push(random_num);
    }
    var num_dom = document.getElementsByClassName("num-input");
    for(var i=0;i<num_dom.length;i++ ){
        num_dom[i].value = random_array[i];
    }

document.getElementById("process").focus();
}








    //
    
    



    function cal(e){

        var process_dom = document.getElementById("process");
        process_dom.value+=e.value;

        
    }

    function operate(e){
        
        var process_dom = document.getElementById("process");
        process_dom.value+=e.innerHTML;

    }

    function operateResult(e){
        var res = document.getElementById("result");
        var process_dom = document.getElementById("process")
        res.value=eval(process_dom.value);
    }

    // document.getElementById("add").onclick=function(){
    //     alert(this.innerHTML)
    // }

function del(e){
    var process_dom = document.getElementById("process");
    process_dom.value = process_dom.value.substring(0,process_dom.value.length-1);
    document.getElementById("process").focus();
}




</script>
</body>
</html>

 

posted @ 2018-11-26 21:32  emmaa  阅读(112)  评论(0)    收藏  举报