my calculator

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的计算器</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>
</head>
<body>
<div class="calculator">
    <table class="table" border="1px">
        <tr>
            <!-- colspan 合并列单元格，设置当前单元格横跨的列数-->
            <td class="myCalculator t" colspan="4">我的计算器</td>
        </tr>
        <tr>
            <td class="result t" colspan="4">
                <textarea id="outputText" cols="3" disabled></textarea>
            </td>
        </tr>
        <tr>
            <td class="t" onclick="Moc(1)">开机</td>
            <td class="t" onclick="Moc(2)">复位</td>
            <td class="t" onclick="Joc(4)">÷</td>
            <td class="t" onclick="Joc(3)">×</td>
        </tr>
        <tr>
            <td class="t" onclick="oc(7)">7</td>
            <td class="t" onclick="oc(8)">8</td>
            <td class="t" onclick="oc(9)">9</td>
            <td class="t" onclick="Joc(2)">-</td>
        </tr>
        <tr>
            <td class="t" onclick="oc(4)">4</td>
            <td class="t" onclick="oc(5)">5</td>
            <td class="t" onclick="oc(6)">6</td>
            <td class="t" onclick="Joc(1)">+</td>
        </tr>
        <tr>
            <td class="t" onclick="oc(1)">1</td>
            <td class="t" onclick="oc(2)">2</td>
            <td class="t" onclick="oc(3)">3</td>
            <td class="t" rowspan="2" onclick="Roc()">=</td>
        </tr>
        <tr>
            <td class="t" onclick="Moc(3)">.</td>
            <td class="t" onclick="oc(0)">0</td>
            <td class="t" onclick="Moc(4)">退格</td>
        </tr>
    </table>
</div>
</body>
</html>

index.css

.calculator{
    width:350px;
    height:450px;
    border:1px solid #ccc;
    margin:80px auto;
    background-color:#ccc;
}
.table{
    width:95%;
    height:95%;
    margin:10px auto;
    background-color:#999
}
.myCalculator{
    width:100%;
    height:40px;
    background-color:#333;
    color:#FFF
}
.result{
    padding:0;
    width:100%;
    height:60px;
}
.t{
    width:25%;
    text-align:center;
}
#outputText{
    background-color:#FFF;
    width:97%;
    height:100%;
    font-size:20px;
    overflow:hidden;
    text-align:right;
}

index.js

var ad='';      //ad为文本框将要输出的内容
var jia='';     //jia为运算符之前的字符串
var i=0;        //i用来表示之前是否已经使用过运算符，0表示未使用，1表示已使用
var j=0;        //j用来区分运算符 1：+；2：-；3：*；4：/；
var k=0;		   //k用来区分特殊按键 1：开机；2：复位；3：.；4：退格；
var n=0;        //n用来记录开机次数
var m=0;			//m用来统计.使用的次数。
function oc(args){
    if(k==1){
        if(ad==0){ad=''}
        //将参数与之前文本框的值拼接
        ad=ad+args;
        //将参数值传到文本框
        document.getElementById("outputText").value=ad;
    }
}
function Joc(args){
    if(k==1){
        switch(args){
            case 1:{               //加
                if(i==1){break}else{ //i==1表示已经使用过运算符
                    jia=ad;
                    ad=ad+'+';       //将加号拼接到显示栏
                    document.getElementById("outputText").value=ad;
                    i=1;
                    j=args;
                }
            };break;
            case 2:{               //减
                if(i==1){break}else{ //i==1表示已经使用过运算符
                    jia=ad;
                    ad=ad+'-';       //将加号拼接到显示栏
                    document.getElementById("outputText").value=ad;
                    i=1;
                    j=args;
                }
            };break;
            case 3:{               //乘
                if(i==1){break}else{ //i==1表示已经使用过运算符
                    jia=ad;
                    ad=ad+'×';       //将加号拼接到显示栏
                    document.getElementById("outputText").value=ad;
                    i=1;
                    j=args;
                }
            };break;
            case 4:{               //除
                if(i==1){break}else{ //i==1表示已经使用过运算符
                    jia=ad;
                    ad=ad+'÷';       //将加号拼接到显示栏
                    document.getElementById("outputText").value=ad;
                    i=1;
                    j=args;
                }
            }
        }
    }
}
function Roc(){
    if(k==1){
        switch(j){
            case 1:{
                var myAd=ad.split('+');     //将整个字符串用加号分割
                jia=parseInt(jia);          //将+前面的字符串转换为int
                var jia1=myAd[1];           //拿到+后面的字符串
                jia1=parseInt(jia1);        //将+后面的字符串转换为int
                ad=jia+jia1;                //拿到两个int类型的数据之和
                document.getElementById("outputText").value=ad;
                ad='';
                i=0;
                j=0;
                m=0;
                ad='';
                jia='';
            };break;
            case 2:{
                var myAd=ad.split('-');     //将整个字符串用减号分割
                jia=parseInt(jia);          //将-前面的字符串转换为int
                var jia1=myAd[1];           //拿到-后面的字符串
                jia1=parseInt(jia1);        //将-后面的字符串转换为int
                ad=jia-jia1;                //拿到两个int类型的数据之差
                document.getElementById("outputText").value=ad;
                ad='';
                i=0;
                j=0;
                m=0;
                ad='';
                jia='';
            };break;
            case 3:{
                var myAd=ad.split('×');     //将整个字符串用乘号分割
                jia=parseInt(jia);          //将×前面的字符串转换为int
                var jia1=myAd[1];           //拿到×后面的字符串
                jia1=parseInt(jia1);        //将×后面的字符串转换为int
                ad=jia*jia1;                //拿到两个int类型的数据之积
                document.getElementById("outputText").value=ad;
                ad='';
                i=0;
                j=0;
                m=0;
                ad='';
                jia='';
            };break;
            case 4:{
                var myAd=ad.split('÷');     //将整个字符串用除号分割
                jia=parseInt(jia);          //将÷前面的字符串转换为int
                var jia1=myAd[1];           //拿到÷后面的字符串
                jia1=parseInt(jia1);        //将÷后面的字符串转换为int
                ad=jia/jia1;                //拿到两个int类型的数据相除
                document.getElementById("outputText").value=ad;
                ad='';
                i=0;
                j=0;
                m=0;
                ad='';
                jia='';
            };break;
        }
    }
}
function Moc(args){
    switch(args){
        case 1:{
            if(n==0){
                k=1;
                document.getElementById("outputText").value=0;
                n=1;
                ad='';
                jia='';
            }else if(n==1){
                k=0;
                document.getElementById("outputText").value='';
                n=0;
                ad='';
                jia='';
            }
        };break;
        case 2:{
            if(k==1){
                document.getElementById("outputText").value=0;
            }
        };break;
        case 3:{
            if(k==1){
                if(j!=0){m=0;}
                if(m==1){break}else{
                    ad=ad+'.';       //将.号拼接到显示栏
                    document.getElementById("outputText").value=ad;
                    m=1;
                }
            }
        };break;
        case 4:{
            if(k==1){
                var a=ad.length;
                 if(a>0){
                    //substring(x)是从字符串的的第x个字符截取
                    // substring(x,y）是从x到y前的位置停止
                    var ads=ad.substring(0,a-1);
                    ad=ads;
                    document.getElementById("outputText").value=ad;
                 }
            }
        };break;
    }
}

Effect

Guess you like