本文目录
- 如何用JS创建一个简单的网页计算器
- 简易的网页计算器代码
- 网页版计算器
- html网页计算器代码怎么写
- 网页计算器（用C#或Editplus）
- 如何提取网页计算器中的计算公式
- 怎么在网页上制作一个简易计算器
- 网页计算器怎么实现
如何用JS创建一个简单的网页计算器
《!doctype html》 《html》 《head》 《title》计算器《/title》 《meta charset=“utf-8“/》 《style type=“text/css“》 .panel{ border:4px solid #ddd; width:192px; margin:100px auto; } .panel p,.panel input{ font-family:“微软雅黑“; font-size:20px; margin:4px; float:left; } .panel p{ width:122px; height:26px; border:1px solid #ddd; padding:6px; overflow:hidden; } .panel input{ width:40px; height:40px; border:1px solid #ddd; } 《/style》 《script type=“text/javascript“》 //参数e用来接收传入的event对象 function cal(e){ //1.获取事件源，处理button的事件 var obj=e.srcElement||e.target; if(obj.nodeName !=“INPUT“){ return; } var value=obj.value; var p=document.getElementById(“screen“); if(value==“C“){ //2.如果是[C]，则清空p p.innerText=““; }else if(value==“=“){ //3.如果是[=]，则运算 var exp=p.innerText; try{ var result=eval(“(“+exp+“)“); //如果正确执行，将结果写入p p.innerText=result; }catch(e){ //发生错误，给予错误提示 p.innerText=“Error.“; } }else{ //4.如果是其它按钮，则将value追加到p中 p.innerText+=value; } } 《/script》 《/head》 《body》 《!--在最外层的div上注册单击事件，传入event对象，然后在函数中通过event判断出事件来源于哪一个button， 进而做出应有的处理。这样的好处是，避免在button上大量的注册事件。--》 《div class=“panel“ onClick=“cal(event);“》 《div》 《p id=“screen“》《/p》 《input type=“button“ value=“C“》 《div style=“clear:both“》《/div》 《/div》 《div》 《input type=“button“ value=“7“》 《input type=“button“ value=“8“》 《input type=“button“ value=“9“》 《input type=“button“ value=“/“》 《input type=“button“ value=“4“》 《input type=“button“ value=“5“》 《input type=“button“ value=“6“》 《input type=“button“ value=“*“》 《input type=“button“ value=“1“》 《input type=“button“ value=“2“》 《input type=“button“ value=“3“》 《input type=“button“ value=“-“》 《input type=“button“ value=“0“》 《input type=“button“ value=“.“》 《input type=“button“ value=“=“》 《input type=“button“ value=“+“》 《div style=“clear:both“》《/div》 《/div》 《/body》 《/html》
这是我自学时候写的计算器
简易的网页计算器代码
代码如下：《html》《head》《title》低B计算器《/title》《script language=“javascript“ type=“text/javascript“》var a;function t(){var num1=parseFloat(document.form1.textfield.value);var num2=parseFloat(document.form1.textfield2.value);var result;switch(a){case “1“:result=num1+num2;document.form1.textfield3.value=result;a=“0“;break;case “2“:result=num1-num2;document.form1.textfield3.value=result;a=“0“;break;case “3“:result=num1*num2;document.form1.textfield3.value=result;a=“0“;break;case “4“:result=num1/num2;document.form1.textfield3.value=result;a=“0“;break;default:document.form1.textfield3.value=(“请问您要执行哪种运算？“);break;}}function plus(){a=“1“;}function subtract(){a=“2“;}function multiply(){a=“3“;}function divide(){a=“4“;}《/script》《/head》《body》《form id=“form1“ name=“form1“ method=“post“ action=““》 《label》 《input type=“text“ name=“textfield“ id=“textfield“ /》 《br /》 《input type=“button“ name=“button“ id=“button“ value=“+“ onclick=“plus()“/》 《input type=“button“ name=“button2“ id=“button2“ value=“-“ onclick=“subtract()“/》 《input type=“button“ name=“button3“ id=“button3“ value=“*“ onclick=“multiply()“/》 《input type=“button“ name=“button4“ id=“button4“ value=“/“ onclick=“divide()“/》 《br /》 《/label》 《label》 《input type=“text“ name=“textfield2“ id=“textfield2“ /》 《br /》 《input type=“button“ name=“button5“ id=“button5“ value=“=“ onclick=“t()“/》 《br /》 《/label》 《label》 《input type=“text“ name=“textfield3“ id=“textfield3“ /》 《br /》 《/label》《/form》《/body》《/html》
网页版计算器
《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ ““; } else { form.ipt.value=1/form.ipt.value; num2=form.ipt.value; } break; case “sqrt“://开方 form.ipt.value=Math.sqrt(form.ipt.value); //math对象 开方运算 num2=form.ipt.value; break; case “+/-“://+/-运算符 负号运算 if(upOper)//当运行了符号则不能按负号 { form.ipt.value=0-form.ipt.value; num2=form.ipt.value; } else{ form.ipt.value=“0“; } break; case “pi“: form.ipt.value=“3.1415926“; num2=form.ipt.value; break; case “sin“: form.ipt.value=Math.sin(form.ipt.value); num2=form.ipt.value; break; case “cos“: form.ipt.value=Math.sin(form.ipt.value); num2=form.ipt.value; break; case “tan“: form.ipt.value=Math.sin(form.ipt.value); num2=form.ipt.value; break; } }//全部M系列功能模块function checkallM(i){ switch(i){ case“M+“://启动M系列功能模块 if(form.ipt.value!=“0“ && ms==false) { form.ipt1.value=“M“;//在显示框2显示M以告知用户以启动M系列功能 sm=form.ipt.value; } if(form.ipt1.value==“M“ && ms!=false) { sm=eval(ss+’+’+form.ipt.value);//MR保存的值提取实现M+功能 } xM=true; //记住单击过M+ 以便MR操作 break; case “MS“://启用M系列功能 启动记忆功能（记忆上一次计算结果） ss=form.ipt.value;// 把显示框结果给SS保存（予以MR提取 if(form.ipt.value==“0“)//当显示框1显示结果为0时单击MS时也可以清除显示框2 M功能 { form.ipt1.value=““;//清除显示框2 M } if(form.ipt.value!=“0“) { form.ipt1.value=“M“; } ms=true; //记住单击过Ms 以便MR操作 (看是否赋+运算后的值 还是当前值 break; case “MR“://提取MS保存数值功能 if(xM)//是否单击m+ { if(form.ipt1.value==“M“ )//当启动M功能时 MR才能起到保存提取的功能 { form.ipt.value=sm;//当条件符合 则把MS保存的值 并实现M+功能 } else if(subOper || tnumber){//没有启动M功能 则清除显示框 form.ipt.value=“0“; } } // else{ form.ipt.value=ss;} break; case “MC“: // 清除M显示框中M系列的功能 form.ipt1.value=““;//清空显示框2的 M功能 xM=false; ms=false; break;}cM=true; lingState=“beStart“;//清除当前状态}//onLoad=“setStart()“《/script》《style type=“text/css“ 》 #c{ width:320px; height:270px; border:#666666 5px groove; background-color:#ECE9D8 } #ipts{ margin:5px 5px 3px 5px; text-align:right; width:270px} #s{ margin:7px 5px 6px 5px; height:200px} .bt{ width:30px; height:30px; background-color:#ECE9D8; border:solid 1px #C8C6B0} .bt2{width:75px; height:30px; color:#F00; background-color:#ECE9D8; border:solid 1px #C8C6B0;} .bt3{width:20px; height:20px; text-align:center;} .wz{ font-size:12px} 《/style》《/head》《body 》《!---隐藏层--》《div id=“s“》《FORM METHOD=POST ACTION=““ name=“form“》《div id=“c“》 《table width=“98%“ height=“268“ border=“0“ align=“center“ cellpadding=“0“》 《tr》 《td height=“19“ colspan=“7“》 《table width=“294“ border=“0“ cellpadding=“0“ cellspacing=“0“ 》 《tr》 《td class=“wz“ width=“12“ height=“19“》 《/td》 《td class=“wz“ width=“47“》编辑(E)《/td》 《td class=“wz“ width=“49“》查看(V)《/td》 《td class=“wz“ width=“186“》帮助(H)《/td》 《/tr》 《/table》《/td》《/tr》《tr》 《td height=“29“ colspan=“7“》 《div id=“ipts“》 《input name=“ipt“ type=“text“ id=“ipts“ value=“0“ size=“40“ maxlength=“20“ readonly=“readonly“ /》 《/div》 《/td》《/tr》 《!-- ipt1 Backspace CE C --》 《tr》 《td height=“38“ colspan=“7“ align=“center“》《table width=“100%“ border=“0“ cellspacing=“0“ cellpadding=“0“》 《tr》 《td width=“14%“ align=“center“》《input name=“ipt1“ type=“text“ disabled=“disabled“ class=“bt3“ size=“1“ maxlength=“0“ /》《/td》 《td width=“86%“ align=“center“》《table width=“97%“ border=“0“ cellspacing=“0“ cellpadding=“0“》 《tr》 《td align=“center“》《input name=“button23“ type=“button“ class=“bt2“ id=“button23“ style=“color:#00F“ value=“Backspace“ onclick=“cleaktext(this.value)“/》《/td》 《td align=“center“》《input style=“color:#00F“ name=“button21“ type=“button“ class=“bt2“ id=“button20“ value=“CE“ onclick=“cleaktext(this.value)“/》《/td》 《td align=“center“》《input style=“color:#00F“ name=“button20“ type=“button“ class=“bt2“ id=“button21“ value=“C“ onclick=“cleaktext(this.value)“/》《/td》 《/tr》 《/table》《/td》 《/tr》 《/table》《/td》 《/tr》 《!-- MC 7 8 9 / sqrt --》 《tr》 《td width=“16%“ align=“center“》《table width=“99%“ height=“162“ border=“0“》 《tr》 《td height=“35“ align=“center“》《input style=“color:#F00“ type=“button“ value=“MC“ class=“bt“ onclick=“checkallM(this.value)“/》《/td》 《td width=“16%“ align=“center“》《input style=“color:#00F“ name=“button1“ type=“button“ class=“bt“ id=“button1“ value=“7“ onclick=“number(this.value)“ /》《/td》 《td width=“14%“ align=“center“》《input style=“color:#00F“ name=“button2“ type=“button“ class=“bt“ id=“button2“ value=“8“ onclick=“number(this.value)“ /》《/td》 《td width=“14%“ align=“center“》《input style=“color:#00F“ name=“button3“ type=“button“ class=“bt“ id=“button3“ value=“9“ onclick=“number(this.value)“/》《/td》 《td width=“13%“ align=“center“》《input style=“color:#F00“ name=“button4“ type=“button“ class=“bt“ id=“button4“ value=“/“ onclick=“allfhao(this.value)“/》《/td》 《td width=“14%“ align=“center“》《input style=“color:#00F“ name=“button5“ type=“button“ class=“bt“ id=“button5“ value=“sqrt“ onclick=“alltx(this.value)“/》《/td》 《td width=“16%“ align=“center“》《input style=“color:#00F“ name=“button24“ type=“button“ class=“bt“ id=“button24“ value=“sin“ onclick=“alltx(this.value)“/》《/td》 《/tr》 《!-- MR 4 5 6 * % --》 《tr》 《td width=“13%“ height=“39“ align=“center“》《input style=“color:#F00“ type=“button“ value=“MR“ class=“bt“ onclick=“checkallM(this.value)“/》《/td》 《td width=“16%“ align=“center“》《input style=“color:#00F“ name=“button6“ type=“button“ class=“bt“ id=“button6“ value=“4“ onclick=“number(this.value)“ /》《/td》 《td width=“14%“ align=“center“》《input style=“color:#00F“ name=“button7“ type=“button“ class=“bt“ id=“button7“ value=“5“ onclick=“number(this.value)“/》《/td》 《td width=“14%“ align=“center“》《input style=“color:#00F“ name=“button8“ type=“button“ class=“bt“ id=“button8“ value=“6“ onclick=“number(this.value)“/》《/td》 《td width=“13%“ align=“center“》《input style=“color:#F00“ name=“button9“ type=“button“ class=“bt“ id=“button9“ value=“*“ onclick=“allfhao(this.value)“/》《/td》 《td width=“14%“ align=“center“》《input style=“color:#00F“ name=“button10“ type=“button“ class=“bt“ id=“button10“ value=“%“ onclick=“alltx(this.value)“/》《/td》 《td width=“16%“ align=“center“》《input style=“color:#00F“ name=“button25“ type=“button“ class=“bt“ id=“button25“ value=“cos“ onclick=“alltx(this.value)“/》《/td》 《/tr》 《!-- MS 1 2 3 - 1/x --》 《tr》 《td width=“13%“ height=“38“ align=“center“》《input style=“color:#F00“ type=“button“ value=“MS“ class=“bt“ onclick=“checkallM(this.value)“ /》《/td》 《td width=“16%“ align=“center“》《input style=“color:#00F“ name=“button11“ type=“button“ class=“bt“ id=“button11“ value=“1“ onclick=“number(this.value)“/》《/td》 《td width=“14%“ align=“center“》《input style=“color:#00F“ name=“button12“ type=“button“ class=“bt“ id=“button12“ value=“2“ onclick=“number(this.value)“/》《/td》 《td width=“14%“ align=“center“》《input style=“color:#00F“ name=“button13“ type=“button“ class=“bt“ id=“button13“ value=“3“ onclick=“number(this.value)“/》《/td》 《td width=“13%“ align=“center“》《input style=“color:#F00“ name=“button14“ type=“button“ class=“bt“ id=“button14“ value=“-“ onclick=“allfhao(this.value)“/》《/td》 《td width=“14%“ align=“center“》《input style=“color:#00F“ name=“button15“ type=“button“ class=“bt“ id=“button15“ value=“1/x“ onclick=“alltx(this.value)“/》《/td》 《td width=“16%“ align=“center“》《input style=“color:#00F“ name=“button26“ type=“button“ class=“bt“ id=“button26“ value=“tan“ onclick=“alltx(this.value)“/》《/td》 《/tr》 《!-- M+ 0 +/- . + = --》 《tr》 《td width=“13%“ height=“38“ align=“center“》《input style=“color:#F00“ type=“button“ value=“M+“ class=“bt“ onclick=“checkallM(this.value)“/》《/td》 《td width=“16%“ height=“38“ align=“center“》《input style=“color:#00F“ name=“button16“ type=“button“ class=“bt“ id=“button16“ value=“0“ onclick=“number(this.value)“/》《/td》 《td width=“14%“ height=“38“ align=“center“》《input style=“color:#00F“ name=“button17“ type=“button“ class=“bt“ id=“button17“ value=“+/-“ onclick=“alltx(this.value)“/》《/td》 《td width=“14%“ align=“center“》《input style=“color:#00F“ name=“button18“ type=“button“ class=“bt“ id=“button18“ value=“.“ onclick=“point()“/》《/td》 《td width=“13%“ align=“center“》《input style=“color:#F00“ name=“button19“ type=“button“ class=“bt“ id=“button19“ value=“+“ onclick=“allfhao(this.value)“ /》《/td》 《td width=“14%“ align=“center“》《input style=“color:#F00“ name=“button22“ type=“button“ class=“bt“ id=“button22“ value=“=“ onclick=“sum()“/》《/td》 《td width=“16%“ align=“center“》《input style=“color:#00F“ name=“button27“ type=“button“ class=“bt“ id=“button27“ value=“pi“ onclick=“alltx(this.value)“/》《/td》 《/tr》 《/table》 《/td》《/tr》《/table》《/div》《/FORM》《/div》《/body》《/html》
html网页计算器代码怎么写
html网页计算器代码编写过程如下：
1.首先我们要做好一个计算器的界面，主要用到html与css的知识，下面是代码
《table id=“calculater“ onClick=“calculater()“》
《tr》
《td id=“display“ colspan=“5“》0《/td》
《/tr》
《tr》
《td class=“numberkey“ 》1《/td》
《td class=“numberkey“ 》2《/td》
《td class=“numberkey“ 》3《/td》
《td class=“numberkey“ 》+《/td》
《td class=“numberkey“ id=“deletesign“》c《/td》
《/tr》
《tr》
《td class=“numberkey“ 》4《/td》
《td class=“numberkey“ 》5《/td》
《td class=“numberkey“ 》6《/td》
《td class=“numberkey“ 》-《/td》
《td rowspan=“3“ id=“equality“ onclick=“resultscalcaulte()“》=《/td》
《/tr》
《tr》
《td class=“numberkey“ 》7《/td》
《td class=“numberkey“ 》8《/td》
《td class=“numberkey“ 》7《/td》
《td class=“numberkey“ 》*《/td》
《/tr》
《tr 》
《td class=“numberkey“ 》+/-《/td》
《td class=“numberkey“ 》0《/td》
《td class=“numberkey“ 》.《/td》
《td class=“numberkey“ 》/《/td》
《/tr》
上面设置一个简单的table表格，主要内容是计算器的数字键盘和符号，还有就是class名和ID名，函数名，主要是用作css样式设计和javascript程序设计，后面会用到，就先贴出来了
colspan=“5“ 是合并五列的意思，表示这个单元格要占五列
rowspan=“3“是合并三行的意思，表示这个单元格要占三行
效果如下，这样一个简单的架构就完成了
2.接下来就是css的设计，下面是代码
*{
padding:0;
margin:1px;
}
#calculater{
margin: auto;
margin-top: 30px;
border: solid 6px #2371D3;
border-spacing: 0px;
}
#display{
width: 100%;
height: 30px;
border-bottom: solid 4px #2371D3;
font-weight: bold;
color: #193D83;
font-family: 黑体;
padding-left: 2px;
}
.numberkey{
cursor: pointer;
width: 40px;
height: 30px;
border: solid 1px #FFFFFF;
background: #2371D3;
color: #ffffff;
text-align: center;
font-weight: bold;
font-family: 黑体;
}
#equality{
cursor: pointer;
width: 40px;
height: 100%;
background: #2371D3;
border: solid 1px #FFFFFF;
color: #ffffff;
text-align: center;
font-weight: bold;
font-family: 黑体;
}
.numberkey:hover{
background: #EA6F30;
}
#equality:hover{
background: #EA6F30;
}
以上是css代码，比较简单
border-spacing: 0px;
这里代码的意义是：table中单元格与单元格，表格边缘都有默认距离，这里border-spacing: 0px;能使其默认距离为零，没有这句会比较难设计好看的样式。
cursor: pointer;
这里代码的意义是：使鼠标放在上面时变成一个手的标志
效果如下
3.接下来是javascript的代码，按照思路来一点点写
首先我们要设计，当鼠标点击某个单元格时我们能获取这个单元格上的内容，即数字或符号
所以我们在table标签里加上onClick=“calculater()“，添加一个点击事件
然后用event.srcElement.innerText获取单元格上的内容，event是事件的意思，在这里这个事件当然是点击了，srcElement就是事件的元素，在这里是被点击的单元格，innerText是获取这个单元格的内容。
这里我们就可以写出这个函数第一行代码，获取被点击的单元格的内容
function calculater(){
results=event.srcElement.innerText;
}
results就是单元格的内容
4.当然获取了什么要显示在第一个单元格那里，这里我们还是用innerText，来输出这个点击的值
display.innerText=results;
这里代码的意义是：display是第一格单元格的id,就是在第一行显示你点击了什么
calculater()的代码就变成这样
function calculater(){
results=event.srcElement.innerText;
display.innerText=results;
}
这样我们就能输出我们点击的单元格内容
5.但这样我们只能输出一次单击的内容，为了把内容串起来，我们把代码改为
var results=““;
function calculater(){
results+=event.srcElement.innerText;
display.innerText=results;
}
设置results为全局变量，event.srcElement.innerText用+=累加进results，
这样我们就能输入并显示一条算式
6.我们在“=”单元格标签里加上onClick=“resultscalcaulte()“，计算这个结果
function resultscalcaulte(){
calresults=eval(results);
display.innerText=calresults;
}
eval();能运行括号里的javascript语句的字符串，并返回其值，如果results等于7+8，那eval就会计算7+8，并返回56，然后后面一条代码把56显示出来
7.加入上面的运算后，还是无法显示结果，原因是点击“=”单元格会先触发resultscalcaulte()函数，再触发calculater()函数，所以我们在resultscalcaulte()得到的结果就被calculater()的结果覆盖了，我们需要再在calculater()里加上
if (event.srcElement.innerText==“=“) {
return;
}
使点击“=”单元格触发的calculater()函数得不到任何结果
最后得到最简单的计算器运算代码
var results=““;
var calresults=““;
function calculater(){
if (event.srcElement.innerText==“=“) {
return;
}
results+=event.srcElement.innerText;
display.innerText=results;
}
function resultscalcaulte(){
calresults=eval(results);
display.innerText=calresults;
}
8.下面是计算7*8的结果
网页计算器（用C#或Editplus）
打开VS2005, 新建工程, 放好控件, 处理每个按钮的事件响应,OK.程序里放两个变量,一个做结果的存储, 一个做输入数据的存储.在textbox1.Text里改就可以了.
如何提取网页计算器中的计算公式
这些计算公式，都是javascript代码块。比如现在这个问题页，你在空白处“右键”-“查看网页源代码”，里面所有的 《script type=“text/javascript“ src=“路径.js“》《/script》都是js方法。一般的js方法，都是经过了混淆加密的，不让客户轻易破解。再者，很多专有的方法，是在后台进行计算的。
怎么在网页上制作一个简易计算器
(1)先画个页面，把每个数字 运算符号放进去；(2)然后每个数字 符号绑定一个事件，这个事件获取数字或者符号的值，放进一个Input框；(3)点击计算，把Input框的字符串表达式计算，eval(“1*2“)；(4)还有计算前要对表达式进行校验,不规则的表达式不能计算。
网页计算器怎么实现
第一种方式:《!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》《title》《/title》《script src=“Styles/jquery-1.4.1.min.js“ type=“text/javascript“》《/script》《script type=“text/javascript“》$(function () {$(“#btnEquals“).click(function () {var txt1 = $(“#txt1“).val() - 0;var txt2 = $(“#txt2“).val() - 0;var sel = $(“#sel“).val();var rec = 0;switch (sel) {case “+“: rec = txt1 + txt2; break;case “-“: rec = txt1 - txt2; break;case “*“: rec = txt1 * txt2; break;case “/“: rec = txt1 / txt2; break;}// rec = new Function(“return “+txt1+sel+txt2);$(“#txtResult“).val(rec);});});《/script》《/head》《body》《input type=“text“ id=“txt1“ value=““ /》《select id=“sel“》《option》+《/option》《option》-《/option》《option》*《/option》《option》/《/option》《/select》《input type=“text“ id=“txt2“ value=““ /》《input type=“button“ id=“btnEquals“ value=“=“ /》《input type=“text“ id=“txtResult“ value=““ /》《/body》《/html》第二种方式:《!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》《title》《/title》《script src=“Styles/jquery-1.4.1.min.js“ type=“text/javascript“》《/script》《script type=“text/javascript“》$(function () {$(“#btnEquals“).click(function () {var txt1 = $(“#txt1“).val() - 0;var txt2 = $(“#txt2“).val() - 0;var sel = $(“#sel“).val();var rec = 0;// switch (sel) {// case “+“: rec = txt1 + txt2; break;// case “-“: rec = txt1 - txt2; break;// case “*“: rec = txt1 * txt2; break;// case “/“: rec = txt1 / txt2; break;// }rec = new Function(“return “+txt1+sel+txt2);$(“#txtResult“).val(rec);});});《/script》《/head》《body》《input type=“text“ id=“txt1“ value=““ /》《select id=“sel“》《option》+《/option》《option》-《/option》《option》*《/option》《option》/《/option》《/select》《input type=“text“ id=“txt2“ value=““ /》《input type=“button“ id=“btnEquals“ value=“=“ /》《input type=“text“ id=“txtResult“ value=““ /》《/body》《/html》