javascript实现简易的计算器

页面效果如下：

 

 

 html代码如下：

 

<div id="con">
<div id="box">
    <h4>计算器</h4>
    <input type="text" id="ipt">
    <div id="num">
       <button value="7" onclick="numm(this.value)">7</button>
        <button value="8" onclick="numm(this.value)">8</button>
        <button value="9" onclick="numm(this.value)">9</button>
        <button value="back" onclick="back()">back</button>
        <button value="c" onclick="clearall()">c</button>
        <button value="4" onclick="numm(this.value)">4</button>
        <button value="5" onclick="numm(this.value)">5</button>
        <button value="6"onclick="numm(this.value)">6</button>
        <button value="*"  onclick="numm(this.value)">*</button>
        <button value="/" onclick="numm(this.value)">/</button>
        <button value="1" onclick="numm(this.value)">1</button>
        <button value="2" onclick="numm(this.value)">2</button>
        <button value="3"onclick="numm(this.value)">3</button>
        <button value="+" onclick="numm(this.value)">+</button>
        <button value="-" onclick="numm(this.value)">-</button>
        <button value="0" onclick="numm(this.value)">0</button>
        <button value="00" onclick="numm(this.value)">00</button>
        <button value="."onclick="numm(this.value)">.</button>
        <button value="%" onclick="numm(this.value)">%</button>
        <button value="=" onclick="eva()" >=</button>
    </div>
    <div id="ft">
        <span>&copy;版权所有(是小郭呀)</span>
    </div>
</div>
</div>
css代码如下：

*{
    margin: 0;
    padding: 0;
}
#con{
    width:360px;
    height: 430px;
    background: #909fbd;
    padding: 50px 70px;
    margin: 30px auto;
    border-radius: 10px;
}
#box{
    width: 360px;
    height: 440px;
    border: 1px solid white;
    background: #a39f9f;
}
h4{
    font-weight: normal;
    margin-top: 20px;
    text-align: center;
    font-size: 18px;
}
#ipt{
    width: 300px;
    height: 40px;
    border: none;
    margin-left: 30px;
    margin-top: 20px;
}
#num{
    width: 300px;
    height: 220px;
    border: 1px solid white;
    margin-left: 30px;
    margin-top: 30px;
    padding: 10px 0px;
}
#num button{
    width: 42px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 11px;
    margin-bottom: 20px;
    border-radius: 5px;
}
#num button:nth-child(5n+1){
    margin-left: 11px;
}
#ft span{
    color: white;
    margin-top: 20px;
    text-align: center;
    display: block;
}

js代码如下：

<script>
    var num;
    var ipt=document.getElementById(\'ipt\')
    function numm(num) {
       ipt.value+=num;
       console.log(num)
    }
    function eva() {
       ipt.value = eval(ipt.value)
    }
    function clearall() {
        ipt.value=\'\'
    }
    function back() {
        ipt.value = ipt.value.substring(0, ipt.value.length - 1);
    }
</script>