利用HTML+JS+CSS实现简单的网页计算器,附html所有源代码,可直接黏贴运行

最终实现的效果图

源码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Calculator</title>
    </head>
    <style>
    *{ font-size:36px;}
    
    #t{ 
        width:480px;
         height:80px;
         text-align: right;
         font-size: 48px;
         background-color: #F9F0DA;
         }
    .number{
        width:120px; 
        height:80px;
        background-color:#B46381;
        margin: 0;
        display: block;
        }
    .signs{
        width:120px; 
        height:80px;
        background-color:  #A3D0C3;
        margin: 0;
        display: block;

    }
    .shaw{ 
        width:120px; 
        height:80px;
        background-color:  #DABB52;
        margin: 0;
        display: block;

        }
    .equal{ 
        width:120px; 
        height:80px;
        background-color:  #F15B42;
        margin: 0;
        display: block;
        }
    .kuohao{
        width: 60px;
        height: 80px;
        float: left;
        align-self: 0;
        background-color:  #DABB52;
        }
    table td,table th{
        border:1px solid #cad9ea;        
    }
    table tr:nth-child(odd){
        background: #fff;
    }
    </style>

<script>
    //设置标志,用于没有输入时显示0,以及有显示时清空
    var flag=true; 
    function func(str){
    var t=document.getElementById("t");
    if(flag){
    //清除没有输入时的0
    t.value=""; 
        }
    //改变状态,不再清空内容
    flag=false; 
    //将之前的内容和输入的内容相加,重新显示
    t.value=t.value+str;

    }
    //回退一个数,相当于撤销
    function backspace(){
        var t=document.getElementById("t");
        t.value=t.value.substr(0,t.value.length-1);
    }

    //清空显示内容
    function AC(){
        var t=document.getElementById("t");
        //显示0
        t.value="0";
        //让下次输入可以清空0
        flag=true;
    }
    //计算结果
    function equals(){
    var t=document.getElementById("t");
    //将字符串转换为逻辑运算
    t.value=eval(t.value);
    }
</script>
<body>
<!--    内边距          外边距        边框        居中-->
<table cellpadding="0" cellspacing="0" border="0"  align="center" >
    <tr>
		<td colspan="4">
			<input type="text" value="0" id="t" />
		</td>        
    </tr>
        <tr>
             <td><input type="button" class="number" value="7"  onClick="func('7')"/></td>
             <td><input type="button" class="number" value="8" onClick="func('8')"/></td>
             <td><input type="button" class="number" value="9" onClick="func('9')"/></td>
             <td><input type="button" class="signs" value="/" onClick="func('/')"/></td>             
        </tr>
         <tr>
                <td><input type="button" class="number" value="4" onClick="func('4')"/></td>
                <td><input type="button" class="number" value="5" onClick="func('5')"/></td>
                <td><input type="button" class="number" value="6" onClick="func('6')"/></td>
                <td><input type="button" class="signs" value="*" onClick="func('*')"/></td>
                
        </tr>
          <tr>
                <td><input type="button" class="number" value="1" onClick="func('1')"/></td>
                <td><input type="button" class="number" value="2" onClick="func('2')"/></td>
                <td><input type="button" class="number" value="3" onClick="func('3')"/></td>
                <td><input type="button" class="signs" value="-" onClick="func('-')"/></td>
        </tr>
          <tr>
                <td><input type="button" class="number" value="0" onClick="func('0')"/></td>
                <td><input type="button" class="shaw" value="." onClick="func('.')"/></td>
                <td><input type="button" class="number" value="00" onClick="func('00')"/></td>
                <td><input type="button" class="signs" value="+" onClick="func('+')"/></td>
        </tr>
		<tr>
            <td>
                <input type="button" class="kuohao" value="(" onClick="func('(')"/>
                
                <input type="button" class="kuohao" value=")" onClick="func(')')"/>
            </td>
            <td><input type="button"  class="shaw" value="后退" style="float:top" onClick="backspace()"/></td>
            <td>
                <input type="button" class="shaw" value="清除" onClick="AC()"/>
                </td>
			<td rowspan="2"><input type="button" value="=" class="equal" onClick="equals()"/></td>
			
        </tr>          
    </table>                                                  
</body>
</html> 


©️2020 CSDN 皮肤主题: 岁月 设计师: pinMode 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值