html网页计算器代码怎么写？网页版计算器

本文目录

• html网页计算器代码怎么写
• 网页版计算器
• 简易的网页计算器代码
• 如何提取网页计算器中的计算公式
• 怎么在网页上制作一个简易计算器
• 如何用JS创建一个简单的网页计算器
• 网页计算器怎么实现

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的结果

网页版计算器

《!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》
《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》

如何提取网页计算器中的计算公式

这些计算公式，都是javascript代码块。比如现在这个问题页，你在空白处“右键”-“查看网页源代码”，里面所有的 《script type=“text/javascript“ src=“路径.js“》《/script》都是js方法。一般的js方法，都是经过了混淆加密的，不让客户轻易破解。再者，很多专有的方法，是在后台进行计算的。

怎么在网页上制作一个简易计算器

(1)先画个页面，把每个数字 运算符号放进去；
(2)然后每个数字 符号绑定一个事件，这个事件获取数字或者符号的值，放进一个Input框；
(3)点击计算，把Input框的字符串表达式计算，eval(“1*2“)；
(4)还有计算前要对表达式进行校验,不规则的表达式不能计算。

如何用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》

这是我自学时候写的计算器

网页计算器怎么实现

第一种方式:
《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “