js网页计算器代码(兼容多浏览器)

发布时间:2020-05-27编辑:脚本学堂
一段js计算器代码,js实现的网页计算器程序,兼容IE8、360、FireFox、Chrome、Safari、Opera等多个浏览器,需要的朋友参考下。

此js计算器代码,可以适用于浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

效果,如图:

js网页版计算器

代码:
 

复制代码 代码示例:

<!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实现网页计算器功能 - www.plcxue.com</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>
<div style="text-align:center;clear:both">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>