HTML5实现网页计算器清空操作,使用event.target实现简单的网页版计算器

一次偶然的机会使用了手机上自带的计算器，对手机上的计算器感兴趣，想用已学的知识在网页上实现，一直想不出怎样用简单的方式去获取按键值的思绪，偶然间在其他练习上使用了event.target，便开始研究event.target的使用，最后发现使用event.target.value就能完成这功能，最后用简单的代码通过按键的点击实现简单的四则运算计算器。

虽然将我想要的计算器实现了，但其中还有许多地方需要改善，我会继续完善它的……

以下是一些关键的代码，完整的代码请点击这里

html代码

----lemon156----

css代码

*{

margin: 0;

padding: 0;

}

.cal_box{

width: 340px;

height: 550px;

margin: 100px auto;

border: 1px solid #888;

box-shadow: 0 0 40px #ccc;

}

.cal_box textarea{

width: 310px;

height: 120px;

margin: 10px;

padding-top: 15px;

text-indent: 1em;

font-size: 24px;

overflow: hidden;

resize:none;

}

.cal_box input{

width: 60px;

height: 50px;

margin: 10px;

font-size: 18px;

}

.cal_box span{

text-align: center;

width: 200px;

display: block;

margin: 0 auto;

font-size: 18px;

color: #ccc;

}

js代码

var cal_box=document.getElementById('cal_box'),

display=document.getElementById('display'),

cal_result="",//存放运算结果

list1="", //存放输入的第一个值

list2="", //存放第二个值

num1=0, //第一个值

num2=0, //第二个值

sym="", //运算符号

eql="", //等于号

flag=false;

document.addEventListener('click',function(e){

var target=e.target;

//输入第一个值

if (!flag) {

if(target.className=='btn') {

list1+=target.value;

num1=parseFloat(list1);

display.innerHTML=num1;

}

};

//输入运算符号

if(target.className=='sym') {

flag=true;

sym=target.value;

display.innerHTML=num1+sym;

};

//输入第二个值

if(flag){ //如果按了运算符号的键就输入第二个数

if (target.className=='btn') {

list2+=target.value;

num2=parseFloat(list2);

display.innerHTML=num1+sym+num2;

};

}

//进行计算并输出结果

if (target.className=='eql') { //判断是否是按了等于键

eql=target.value;

flag=false;

switch(sym){

case '/': cal_result=parseFloat(num1/num2);break;

case '*': cal_result=parseFloat(num1*num2);break;

case '-': cal_result=parseFloat(num1-num2);break;

case '+': cal_result=parseFloat(num1+num2);break;

}

display.innerHTML=num1+sym+num2+'\n\n\t'+eql+cal_result;//显示输出结果

list1="";//每次运算完，再次输入时自动清屏，

list2="";//这两个一定要清空，否则需要按清空键才能再次输入

};

//清屏

if (target.className=='cl') {

display.innerHTML=""; //将显示屏清空

flag=false;

list1=""; //输入按键但没有进行运算，按清屏键后不保留之前输入的值

list2="";

};

})