实现简单计算器

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
#wrap{
    height: 400px;
    width: 400px;
    border: 1px solid #ccc;
    margin: 100px auto;
    position: relative;
    background-color: #ccc;
    border-radius: 5%;
    border: 2px solid black;
}
input{
    background-color: rgb(119, 103, 103);
    font-size: 20px;
    color: white;
}
#txt{
    width: 300px;
    height: 50px;
    position: absolute;
    left: 12.5%;
    top: 2.5%;
    text-align: right;
}
#content{
    width: 390px;
    height: 320px;
    position: absolute;
    left: 1.25%;
    bottom: 2.5%;
    background-color: white;
    border-radius: 2%;
}
#content>input{
    width: 380px;
    height: 40px;
    margin-top: 5px;
    margin-left: 5px;
    border-radius: 5%;
}
.con_left{
    width: 290px;
    height: 260px;
    position: absolute;
    bottom: 5px;
    left: 5px;
    overflow: hidden;
}
.con_left>input{
    height: 60px;
    margin-left: 0px;
    margin-top: 5px;
    margin-right: 0px;
    float：left;
    border-radius: 15%;
}

#con_right{
    width: 80px;
    height: 260px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}
#con_right>input{
    width: 60px;
    height: 250px;
    margin-top: 5px;
    margin-left: 10px;
    border-radius: 10%;
}


</style>

<script type="text/javascript">
window.onload = function(){
    var aNumber = document.getElementsByName("number");
    var oTxt = document.getElementById("txt");
    var aSym = document.getElementsByName("symbol");
    var oEqual = document.getElementById("equal");
    var oZero = document.getElementById("zero");
    var oClear = document.getElementById("clear");

    var str = "";  //用于存储第一个数值
    var str2 = "";  //用于存储第二个数值
    var operator = "";  //用于存储运算符
    var bol = true;  //用于判断

    //part1.清空
    oClear.onclick = function(){
        oTxt.value = "";
        str = "";
        str2 = "";
        operator = "";
        bol = true;
    }

    //part2.输入数值
    for(var i=0; i < aNumber.length; i++){
        aNumber[i].onclick = function(){
            if(bol){
                oTxt.value = oTxt.value+this.value;//显示
                str = str + this.value;
            }
            else{
                oTxt.value = oTxt.value+this.value;//显示
                str2 = str2 + this.value;
            }
        }
        
    }

    //part3.输入运算符号
    for(var i =0; i < aSym.length; i++){
        aSym[i].onclick = function(){
            oTxt.value = oTxt.value+this.value;
            operator = this.value;
            bol = false;
        }
    }

    //part4.运算
    oEqual.onclick = function(){
        switch(operator){
            case "+":
            oTxt.value = parseInt(str) + parseInt(str2);
            break;
            case "-":
            oTxt.value = parseInt(str) - parseInt(str2);
            break;
            case "*":
            oTxt.value = parseInt(str) * parseInt(str2);
            break;
            case "/":
            oTxt.value = parseInt(str) / parseInt(str2);
            break;
        }
        bol = true;
        str2 = "";
        str = oTxt.value;
    }

    //part5.关于0的判断
    oZero.onclick = function(){
        if(str != ""&& bol == true){
            str = str + "0";
            oTxt.value = oTxt.value + "0";
        }
        else if(str2 != "" && bol == false){
            str2 = str2 + "0";
            oTxt.value = oTxt.value + "0";
        }
    }


}
</script>
</head>
<body>
<div id="wrap">
    <input type="text" value="" id="txt" style="background-color:white; color:black;">
    <div id="content">
        <input type="button" value="c" style="" id="clear">
        <div class="con_left" id="sent">
            <input type="button" value="7" style="width:65px;" name="number">
            <input type="button" value="8" style="width:65px;" name="number">
            <input type="button" value="9" style="width:65px;" name="number">
            <input type="button" value="/" style="width:65px;" name="symbol">
            <input type="button" value="4" style="width:65px;" name="number">
            <input type="button" value="5" style="width:65px;" name="number">
            <input type="button" value="6" style="width:65px;" name="number">
            <input type="button" value="*" style="width:65px;" name="symbol">
            <input type="button" value="1" style="width:65px;" name="number">
            <input type="button" value="2" style="width:65px;" name="number">
            <input type="button" value="3" style="width:65px;" name="number">
            <input type="button" value="-" style="width:65px;" name="symbol">
            <input type="button" value="0" style="width:210px;" name="number" id="zero">
            <input type="button" value="+" style="width:65px;" name="symbol">
        </div>
        <div id="con_right">
            <input type="button" value="=" id="equal">
        </div>
    </div>
</div>
</body>
</html>
posted @ 2015-06-09 11:25 心胸广阔阅读(193) 评论(0) 收藏举报
刷新页面返回顶部
实现简单计算器

公告
