简易的网页计算器代码
代码如下:
《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里改就可以了.