×

网页计算器

简易的网页计算器代码?如何用JS创建一个简单的网页计算器

admin admin 发表于2022-05-22 08:05:02 浏览96 评论0

抢沙发发表评论

简易的网页计算器代码


代码如下:

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

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

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


网页计算器(用C#或Editplus)


打开VS2005, 新建工程, 放好控件, 处理每个按钮的事件响应,OK.
程序里放两个变量,一个做结果的存储, 一个做输入数据的存储.
在textbox1.Text里改就可以了.