html+js 网络计算器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实验十</title>
<style>
    button{background-color:#0F0; width:1cm};
</style>
</head>

<body>
<script>
    function num(nums)
    {
        var str=document.getElementById("t1");
        str.value=str.value+nums;
    }
    function jia()
    {
        var str=document.getElementById("t1");
        str.value=str.value+"+";
    }
    function jian()
    {
        var str=document.getElementById("t1");
        str.value=str.value+"-";
    }
    function result()
    {
       var str=document.getElementById("t1");
       str.value=eval(str.value); 
    }
    function qing()
    {
       var str=document.getElementById("t1");
       str.value="";
    }
</script>
<table style="background-color:#0C3">
<tr>
<td colspan="3"><input type="text" id="t1" value="" style="text-align:right" ></td>
</tr>
<tr>
<td><button id="0" onClick="num(0)">0</button>
<td><button id="1" onClick="num(1)">1</button>
<td><button id="2" onClick="num(2)">2</button>
</tr>
<tr>
<td><button id="3" onClick="num(3)">3</button>
<td><button id="4" onClick="num(4)">4</button>
<td><button id="5" onClick="num(5)">5</button>
</tr>
<tr>
<td><button id="6" onClick="num(6)">6</button>
<td><button id="7" onClick="num(7)">7</button>
<td><button id="8" onClick="num(8)">8</button>
</tr>
<tr>
<td><button id="9" onClick="num(9)">9</button>
<td><button id="+" onClick="jia()">+</button>
<td><button id="-" onClick="jian()">-</button>
</tr>
<tr>
<td colspan="2"><button style="width:2.5cm" onClick="qing()">清0</button>
<td><button id="=" onClick="result()">=</button>
</tr>
</body>
</html>

效果:

0

Leave a Reply

Your email address will not be published.