JavaScript实现网页计算器
2017-09-17 本文已影响41人
可乐汤圆
本文是html+css+JavaScript实现网页计算器，具备开关、加减乘除、清零等基本功能。
代码效果：
计算器效果图.JPG
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页计算器</title>
<style type="text/css">
body,ul,li{padding: 0;margin: 0;list-style: none;}
#outer{width: 280px;height:410px;margin: 10px auto;padding: 14px;border: 3px solid #535053;background-color: #666666;border-style: groove;}
#screen{width: 260px;height: 80px;border: 2px solid grey;padding:8px;background-color: #E0E0E0;border-style: inset;text-align: right;font-size: 28px;}
#overText{position:absolute;top: 40px;width:275px;background-color: #E0E0E0;border:none;text-align: right;font-size: 16px;}
ul{position:relative;width:340px;margin: 0 0 2px 2px;}
ul li{width: 50px;height:38px;float: left;background-color: #FFCC99;font-size: 24px;text-align:center;line-height:38px;margin: 17px 17px 0 0;border-radius: 5px;border-style: groove;cursor: pointer;}
strong{display: block;width: 50px;height: 38px;}
.key{font-size: 14px;}
#equal{height: 96px;line-height: 96px;}
#equal strong{height: 96px;}
#zero{width: 123px;position: absolute;top: 242px;}
#zero strong{width: 123px;}
#dot{position: absolute;top: 242px;left: 146px;}
</style>
<script type="text/javascript">
window.onload=function()
{
var oUl=document.getElementById("keyboard").getElementsByTagName("ul");
var oTxt=document.getElementById("screen");
var oOTxt=document.getElementById("overText");
var oStr=document.getElementsByTagName("strong");
var s = false;
var oKey=getByClass(oUl,"key");
var a=true;
//开关按键,当a为true时，计算器为开机状态；当a为false时，计算器为关机状态，点击事件改变状态。
oKey[0].onclick=function()
{
if(a)
{
oOTxt.value="";
oTxt.value="";
a=false;
}
else
{
oOTxt.value="";
oTxt.value="0";
a=true;
}
}
//功能按键
for(var i=0;i<oStr.length;i++)
{
oStr[i].index=i;
oStr[i].onclick=function()
{
if(a)
{
var oVue=oStr[this.index].innerHTML;
switch(oVue)
{
case "C":
oOTxt.value="";
oTxt.value="0";
break;
case "/":
count("/");
break;
case "*":
count("*");
break;
case "-":
count("-");
break;
case "+":
count("+");
break;
case "=":
//若s为true，不执行“||”后代码.
s || (oOTxt.value += oTxt.value);
//eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
oTxt.value = eval(oOTxt.value.replace(/\%\/\*\-\+/,''));
oTxt.value = oTxt.value.substr(0,10).replace("NaN",0);
s = true;
break;
case ".":
//search()方法返回字符串中第一个匹配项的索引，如果没有找到匹配项，则返回-1.
//若oTxt.value含操作符，则点击“.”无效.
if(oTxt.value.search(/[\.\%\/\*\-\+]/) != -1)
break;
default:
//若前一步按键为“=”，则按下数字键时，屏幕先归零；若s=false，则直接跳过&&后代码（&&的用法）.
s && (oTxt.value = 0, oOTxt.value = "", s = false);
oTxt.value.length < 10 && (oTxt.value = (oTxt.value + this.innerHTML).replace(/^[0\%\/\*\-\+](\d)/,"$1"));
}
}
}
}
//功能按键函数
function count(a)
{
if(s)
{
oOTxt.value = oTxt.value + a;
oTxt.value = a;
s = false;
}
else
{
//判断oTxt.value跟oOTxt.value中是否包含操作符，执行相应的代码.
/[\%\/\*\-\+]$/.test(oTxt.value) || (oOTxt.value += oTxt.value);
oTxt.value = a;
/[\%\/\*\-\+]$/.test(oOTxt.value) || (oOTxt.value += oTxt.value);
//slice()方法会将传入的负值与字符串的长度相加，即从字符串末尾开始查找返回.
oOTxt.value = oOTxt.value.slice(-1) != a ? oOTxt.value.replace(/.$/,a) : oOTxt.value
}
}
//根据className获取元素
function getByClass(oParent,sClass)
{
var aEle=document.getElementsByTagName("*");
var aResult=[];
for(var i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}
}
</script>
</head>
<body>
<div id="outer">
<input type="text" id="overText" readonly="readonly" />
<input type="text" id="screen" readonly="readonly" value="0" />
<div id="keyboard">
<ul>
<li><strong>C</strong></li>
<li><strong>/</strong></li>
<li><strong>*</strong></li>
<li class="key">ON/OFF</li>
<li><strong>7</strong></li>
<li><strong>8</strong></li>
<li><strong>9</strong></li>
<li><strong>-</strong></li>
<li><strong>4</strong></li>
<li><strong>5</strong></li>
<li><strong>6</strong></li>
<li><strong>+</strong></li>
<li><strong>1</strong></li>
<li><strong>2</strong></li>
<li><strong>3</strong></li>
<li id="equal"><strong>=</strong></li>
<li id="zero"><strong>0</strong></li>
<li id="dot"><strong>.</strong></li>
</ul>
</div>
</div>
</body>
</html>
