您的位置:首页 > Web前端 > JavaScript

<Java Web学习初级阶段>JavaScript实现简单网页计算器

2015-09-12 12:02 1006 查看
功能实现:

能够实现简单的加、减、乘、除、求余计算,可以进行带小数点和正负数的计算,C为清零按钮,CE为退格按钮。

界面截图:



页面布局代码:

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>计算器</title>

<style>

table tr td{width:100px; height:60px; text-align:center;}

#display{width:306px; height:60px; font-size:32px; text-align:right; background-color:#CCC; color:#666;}

.btn{width:80px; height:40px;}

</style>

<script src="calculator.js"></script>

</head>

<body>

<form>

<table border="1" align="center">

<tr>

<td colspan="3"><input type="text" id="display" readonly="readonly" value="0" /></td>

<td><input type="button" class="btn" value="C" onclick="clearscreen()" /></td>

<td><input type="button" class="btn" value="CE" onclick="del()" /></td>

</tr>

<tr>

<td><input type="button" class="btn" value="7" onclick="command(7)" /></td>

<td><input type="button" class="btn" value="8" onclick="command(8)" /></td>

<td><input type="button" class="btn" value="9" onclick="command(9)" /></td>

<td><input type="button" class="btn" value="+/-" onclick="pm()" /></td>

<td><input type="button" class="btn" value="%" onclick="persent()" /></td>

</tr>

<tr>

<td><input type="button" class="btn" value="4" onclick="command(4)" /></td>

<td><input type="button" class="btn" value="5" onclick="command(5)" /></td>

<td><input type="button" class="btn" value="6" onclick="command(6)" /></td>

<td><input type="button" class="btn" value="+"onclick="plus()" /></td>

<td><input type="button" class="btn" value="-"onclick="minus()" /></td>

</tr>

<tr>

<td><input type="button" class="btn" value="1" onclick="command(1)" /></td>

<td><input type="button" class="btn" value="2" onclick="command(2)" /></td>

<td><input type="button" class="btn" value="3" onclick="command(3)" /></td>

<td><input type="button" class="btn" value="*"onclick="times()" /></td>

<td><input type="button" class="btn" value="/"onclick="divide()" /></td>

</tr>

<tr>

<td><input type="button" class="btn" value="0" onclick="command(0)" /></td>

<td><input type="button" class="btn" value="." onclick="dot()" /></td>

<td id="test"></td>

<td><input type="button" class="btn" value="=" onclick="equal()" /></td>

<td><input type="button" class="btn" value="返回" /></td>

</tr>

</table>

</form>

</body>

</html>

JavaScript代码:

var num1=0,results=0,num2=0;

var operate=0; //判断输入状态的标志

var calcul=""; //判断计算状态的标志

function command(num){

var str=String(document.getElementById("display").value); //获得当前显示数据

str=(str!="0") ? ((operate==0) ? str : "") : ""; //如果当前值不是"0",且状态为0,则返回当前值,否则返回空值;

str=str+num; //给当前值追加字符

document.getElementById("display").value=str; //刷新显示

operate=0;

}

function clearscreen(){ //清除数据

num1=0;

results=0;

num2=0;

operate=0;

calcul="";

document.getElementById("display").value="0";

document.getElementById("test").innerText="";

}

function del(){ //退格

var str=String(document.getElementById("display").value);

str=(str!="0") ? ((operate==0) ? str : "0") : "0";

str=(str!="0")?str:"";

str=str.substr(0,str.length-1);

str=(str!="")?str:"0";

document.getElementById("display").value=str;

}

function dot(){

var str=String(document.getElementById("display").value);

str=(str!="0") ? ((operate==0) ? str : "0") : "0"; ////如果当前值不是"0",且状态为0,则返回当前值,否则返回"0";

for(i=0;i<=str.length;i++){

if(str.substr(i,1)=="."){

return false;

}

}

str=str+".";

document.getElementById("display").value=str;

operate=0;

}

function pm(){

var str=String(document.getElementById("display").value);

str=(str!="0") ? ((operate==0) ? str : "0") : "0";

if(str!="0"){

if(str.substr(0,1)=="-"){

str=str.substr(1,str.length-1);

}else{

str="-"+str;

}

}else{

str="0";

}

document.getElementById("display").value=str;

operate=0;

}

function plus(){ //加法

num1=Number(document.getElementById("display").value);

operate=1; //更改输入状态

calcul="+"; //更改计算状态为加

command(num)

}

function minus(){ //减法

num1=Number(document.getElementById("display").value);

operate=1; //更改输入状态

calcul="-";

command(num)

}

function times(){ //乘法

num1=Number(document.getElementById("display").value);

operate=1; //更改输入状态

calcul="*";

command(num)

}

function divide(){ //除法

num1=Number(document.getElementById("display").value);

operate=1; //更改输入状态

calcul="/";

command(num)

}

function persent(){ //求余

num1=parseFloat(document.getElementById("display").value);

operate=1; //更改输入状态

calcul="%";

command(num)

}

function equal(){

num2=parseFloat(document.getElementById("display").value);

calculate(num1,num2,calcul); //等于

operate=1;

calcul="";

num1=0;

num2=0;

results=0;

}

function calculate(num1,num2,calcul){

switch(calcul){ //判断要输入状态

case "+":

results=num1+num2;

break; //计算"+"

case "-":

results=num1-num2;

break; //计算"-"

case "*":

results=num1*num2;

break;

case "/":

if(num2!=0){

results=num1/num2;

}else{

alert("除数不为0!");

}

break;

case "%":

results=num1%num2;

break;

}

document.getElementById("test").innerText=String(num1)+calcul+String(num2);

document.getElementById("display").value=String(results);

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: