js实现网页计算器功能特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js实现网页计算器功能特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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=gb2312" />
<title>js实现网页计算器功能</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#99CC66;}
table{empty-cells:show;border-collapse:collapse;border-spacing:0;}
/* calculator */
.calculator{border:2px solid #fff;text-align:center;background:#CCCC99;width:300px;margin:40px auto;}
.calculator td{padding:5px;}
.calculator input{font-size:14px;padding:5px 10px;cursor:pointer;}
.calculator #jg{font-size:px;padding:3px;border:1px solid #888;width:96%;text-align:right;}
</style>
</head>

<body onload="setfocus()">

<table class="calculator">
	<tr>
		<td colspan="5" align="center" >
			<div style="font-size:14px;color:#333;background-color: #E0CC98;padding:3px;text-align:center;font-weight:bold;border:1px solid #aaa;">计算器</div>
		</td>
	</tr>
	<tr>
		<td colspan="5"><input name="jg" id="jg" type="text"  onKeyup="checkkey()"/></td>
	</tr>
	<tr>
		<td colspan="2" aling="right"><div id="sjxs" name="sjxs" style="text-align:center;height:20px;width:90px;background-color:#666;color:#fff;"></div></td>
		<td colspan="2" align="right"><input type="button" name="cls" value="Backspace" onclick="shanchu()" /></td>
		<td><input type="button" name="qc" id="qc" value="清除" onclick="qc()"/></td>
	</tr>
	<tr>
		<td><input type="button" name="s1" id="s1" value=" 1 " onclick="shu(1)" onkeyup="shu(1)"/></td>
		<td><input type="button" name="s2"  id="s2"value=" 2 "  onclick="shu(2)"/></td>
		<td><input type="button" name="s2" id="s2" value=" 3 " onclick="shu(3)"/></td>
		<td><label><input type="button" name="jian2" id="jian2" value=" + " onclick='yunsuan(&quot;+&quot;)'/></label></td>
		<td><input type="button" name="shijian" id="shijian" value="时间" onclick="timeshow()" /></td>
	</tr>
	<tr>
		<td><input type="button" name="s4" id="s4"value=" 4 " onclick="shu(4)"/></td>
		<td><input type="button" name="s5" id="s5" value=" 5 " onclick="shu(5)"/></td>
		<td><input type="button" name="s6" id="s6" value=" 6 " onclick="shu(6)"/></td>
		<td><input type="button" name="jian3"  id="jian"value=" - " onclick='yunsuan(&quot;-&quot;)' /></td>
		<td><input type="button" name="pf" id="pf" value="平方" onclick="pf()"/></td>
	</tr>
	<tr>
		<td><input type="button" name="s7" id="s7" value=" 7 " onclick="shu(7)"/></td>
		<td><input type="button" name="s8" id="s8" value=" 8 " onclick="shu(8)"/></td>
		<td><input type="button" name="s9" id="s9" value=" 9 " onclick="shu(9)" /></td>
		<td><input type="button" name="cheng" id="cheng" value=" X " onclick='yunsuan(&quot;x&quot;)'/></td>
		<td><input type="button" name="kf" id="kf" value="开方" onclick="kf()"/></td>
	</tr>
	<tr>
		<td><input type="button" name="s0" id="s0" value=" 0 " onclick="shu(0)" /></td>
		<td><input type="button" name="xs" id="xs" value=" . " onclick=shu(".")></td>
		<td><input type="button" name="deng" id="deng" value=" = " onclick="dengyu()"/></td>
		<td><input type="button" name="chu"  id="chu" value=" / " onclick='yunsuan(&quot;/&quot;)'/></td>
		<td><input type="button" name="jc" value=" n!" onclick="jc()" ></td>
	</tr>
</table>

</body>
</html>

<script language="javascript">
var a,b,c,d;
function shu(x)
{
if (jg.value==0)
	{
	jg.value=x;
	}
else
{
	if (x==".")
	{
	var kk=jg.value
	if (kk.indexOf(".")<0)
	{jg.value=jg.value+x;}
	}
	else
	{
	jg.value=jg.value+x;
	}
}
}
function yunsuan(y)
{
	switch (y)
	{
	case "+":
	d="+"
	break
	case "-":
	d="-"
	break
	case "x":
	d="x"
	break
	case "/":
	d= "/"
	}
a=Number(jg.value);
jg.value=""
}
function dengyu()
{
b=Number(jg.value)
if(a!=undefined && b!=0 && d!=undefined)
{
	switch (d)
	{
	case "+":
		c=a+b;
		break;
	case "-":
		c=a-b;
		break;
	case "x":
		c=a*b;
		break;
	
	case "/":
		c=a/b;
	}
jg.value=c;
a=0;
b=0;
d=undefined;
}
}
function qc()
{
a=0;
b=0;
d=undefined;
jg.value="0";
}
function shanchu()
{
var bs=jg.value;
bs=bs.substr(0,bs.length-1);
jg.value=bs;
jg.focus();
}
function pf()
{
var h=Number(jg.value);
if (h!=0)
	{
	h=h*h;
	jg.value=h;
	}
}
function jc()
{
var p=1;
var q=parseInt(jg.value)
if (q!=0 && q!=NaN)
	{
	for (i=1;i<=q;i++)
		{
		p=p*i;
		}
	jg.value=p;
	}

}
function setfocus()
{
jg.focus();
ts=startTime()
}
function kf()
{
if (jg.value!=".")
{
jg.value=Math.sqrt(Number(jg.value))
}
}

function checkkey()
{
var p=/[^0-9]/
if (p.test(jg.value)==true)
{
jg.value=""
jg.focus
}
}
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
m=checkTime(m)
s=checkTime(s)
document.getElementById('sjxs').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
function timeshow()
{

if (document.getElementById('sjxs').style.display!="none")
{
document.getElementById('sjxs').style.display="none"
}
else
{
document.getElementById('sjxs').style.display="block"
}
}
</script>

附件:下载该文件资源,减少时间成本(增值服务)