js计算器（两个数之间的运算）
来源：互联网 发布：修仙记神翼进阶数据 编辑：程序博客网 时间：2024/06/04 19:09
<%@ 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></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>
