代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="calc.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>js计算器 - www.jb200.com</title>
<script type="text/javascript" language="javascript">
function ShowNo() //隐藏两个层
{
document.getElementById("calc").style.display = "none";
}
function $(id) {
return (document.getElementById) ? document.getElementById(id) : document.all[id];
}
function showFloat() //根据屏幕的大小显示两个层
{
var range = getRange();
$('doing').style.width = range.width + "px";
$('doing').style.height = range.height + "px";
document.getElementById("calc").style.display = "";
}
//关闭计算器
function closeFloat() {
document.getElementById("calc").style.display = "none";
document.getElementById("txtNum").value = "";
}
function getRange()//得到屏幕的大小
{
var top = document.body.scrollTop;
var left = document.body.scrollLeft;
var height = document.body.clientHeight;
var width = document.body.clientWidth;
if (top == 0 && left == 0 && height == 0 && width == 0) {
top = document.documentElement.scrollTop;
left = document.documentElement.scrollLeft;
height = document.documentElement.clientHeight;
width = document.documentElement.clientWidth;
}
return { top: top, left: left, height: height, width: width };
}
//计算器
var counter = 0;
var num1 = 0;
var num2 = 0;
var opp;
function enternumber(Num) {
if (document.getElementById("txtNum").value == "0" || document.getElementById("txtNum").value == "") {
document.getElementById("txtNum").value = Num;
}
else {
document.getElementById("txtNum").value += Num;
//form1.txtNum.value += event.srcElement.innerText;
//form1.txtNum.title += event.srcElement.name;
}
function Operation(Op) {
num1 = document.getElementById("txtNum").value;
opp = Op;
document.getElementById("txtNum").value = "";
}
//计算结果
function cout() {
num2 = document.getElementById("txtNum").value;
switch (opp) {
case "+":
counter = parseFloat(num1) + parseFloat(num2);
// document.getElementById("txtNum").value = eval(form1.txtNum.title);
break;
case "-":
counter = parseFloat(num1) - parseFloat(num2);
break;
case "*":
counter = parseFloat(num1) * parseFloat(num2);
break;
case "/":
counter = parseFloat(num1) / parseFloat(num2);
break;
}
document.getElementById("txtNum").value = counter;
}
//清空
function clea() {
document.getElementById("txtNum").value = "0";
}
//退格
function backspace() {
var itSelf = document.getElementById("txtNum").value;
document.getElementById("txtNum").value = itSelf.substring(0, itSelf.length - 1);//截取字符串
if (document.getElementById("txtNum").value == "")
document.getElementById("txtNum").value = 0;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style=" width:500px;">
<tr>
<td colspan="4">
<input id="txtNum" name="txtNum" type="text" style=" margin-left:100px"/><a href="javascript:void(0)" onclick="showFloat()" style=" color:Blue; margin-left :30px;">计算器</a>
<a href="javascript:void(0)" onclick="closeFloat()">关闭计算器</a></td>
</tr></table>
<div id="doing" style="filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;background-color:#000;width:100%;height:100%;z-index:1000;position: absolute;left:0;top:0;display:none;overflow: hidden;">
</div>
<div id="calc" style="border:solid 10px #898989;background:#fff;padding:10px;width:680px;z-index:1001; position: absolute; display:none;top:50%; left:50%;margin:-200px 0 0 -400px;">
<table style="height: 167px; width: 187px; text-align :center; margin-left :150px; " >
<tr>
<td colspan="2" style="text-align: center">
<input id="btnPoint" name="btnPoint" type="button" value="." align="middle" style =" width :60px" onclick ="enternumber('.')"/></td>
<td colspan="2" style="text-align: center">
<input id="btnRoot" name="btnRoot" type="button" style =" width :60px" value="←" onclick="backspace()" /></td>
</tr>
<tr>
<td >
<input id="btn1" name="1" type="button" value="1" onclick ="enternumber()"/></td>
<td >
<input id="btn2" name="btn2" type="button" value="2" onclick ="enternumber(2)"/></td>
<td>
<input id="btn3" name="btn3" type="button" value="3" onclick ="enternumber(3)"/></td>
<td>
<input id="btnPlus" name="btnPlus" type="button" value="+" onclick="Operation('+')"/></td>
</tr>
<tr>
<td >
<input id="btn4" name="btn4" type="button" value="4" onclick ="enternumber(4)"/></td>
<td >
<input id="btn5" name="btn5" type="button" value="5" onclick ="enternumber(5)"/></td>
<td>
<input id="btn6" name="btn6"type="button" value="6" onclick ="enternumber(6)"/></td>
<td>
<input id="btnCut" name="btnCut" type="button" value="-" onclick="Operation('-')"/></td>
</tr>
<tr>
<td >
<input id="btn7" name="btn7" type="button" value="7" onclick ="enternumber(7))"/></td>
<td >
<input id="btn8" name="btn8" type="button" value="8" onclick ="enternumber(8)"/></td>
<td>
<input id="btn9" name="btn9" type="button" value="9" onclick ="enternumber(9)"/></td>
<td>
<input id="btnChengji" name="btnChengji" type="button" value="*" onclick="Operation('*')"/></td>
</tr>
<tr>
<td >
<input id="btnDelete" name="btnDelete" type="button" value="C" onclick="clea()"/></td>
<td >
<input id="btn0" name="btn0" type="button" value="0" onclick ="enternumber(0)"/></td>
<td>
<input id="btnEqual" name="btnEqual" type="button" value="=" onclick="cout()"/></td>
<td>
<input id="btnRemainder" name="btnRemainder" type="button" value="/" onclick="Operation('/')"/></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>