小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

实现了两个数的加、减、乘、除、求余运算,如果你是多个数运算的话，请你先计算两个数，接着与下面的数计算。

结构

我们需要准备一些元素，来展示整个面板。

<div class="box">
    <div>
            <ul>
                    <li class="data_cha"><span>x</span></li>
                    <li><span>-</span></li>
                    <li><span>+</span></li>
            </ul>
            <input type="text" disabled placeholder="0">
    </div>
    <table cellspacing="0" cellpadding="0">
            <tr>
                    <td>AC</td>
                    <td>+/-</td>
                    <td class="yunsuanfu">%</td>
                    <td class="yunsuanfu">&divide;</td>
            </tr>
            <tr>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td class="yunsuanfu">&times;</td>
            </tr>
            <tr>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td class="yunsuanfu">-</td>
            </tr>
            <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td class="yunsuanfu">+</td>
            </tr>
            <tr>
                    <td colspan="2">0</td>
                    <td>.</td>
                    <td>=</td>
            </tr>
    </table>
</div>

样式

给他们一些样式，看的更好看些。

.box{
        width:232px;
        height:320px;
        border: 1px solid gray;
        border-radius:5px;
        overflow: hidden;
        margin: 100px auto;
        position: relative;   
}
.box div{
        height: 80px;
        width: 232px;
        background-color: rgba(0,0,0,.5);
        position: absolute;
}
ul,ul li{
        margin: 0px;
        padding: 0px;
        list-style: none;
}
ul li {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        float: left;
        margin:5px 0px 0px 10px;
        text-align: center;
        line-height: 12px;
        font-size:12px;
        color: black;   
}
ul li:nth-child(1){
        background: red;
}
ul li:nth-child(2){
        background: gold;
}
ul li:nth-child(3){
        background: green;
}
span{
        opacity: 0;
}
ul:hover span{
        opacity: 1;
}
input{
        width:232px;
        height: 60px;
        display: block;
        position: absolute;
        bottom: 0px; 
        font-size: 36px;
        color: white;
        text-align: right;
        line-height: 60px;
        border: none;
        outline: none;
        background: transparent;
        right: 10px;	
}
input::-webkit-input-placeholder{
        color: white; 	
        }
table{
        width:232px;
        height:240px;
        text-align: center;
        background: lightgray;
        font-size: 18px;
        position: absolute;
        bottom: 0px; 
}
table td{
        border-bottom: 1px solid gray;
        border-right: 1px solid gray;
        box-sizing: border-box;
        width: 58px;
        height:48px;

}
tr td:last-child{
        background: darkorange;
        color: white;
        border-right: 1px solid transparent;
}
table tr:last-child td{
        border-bottom: 1px solid transparent;
}

总结

下面我们来实现它的操作逻辑。