北雁计算器
2016-02-25 12:57
197 查看
<!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 type="text/css">
body{
font-size:12px;
font-family:Arial,Georgia, "Times New Roman", Times, serif;
color:#00F;
text-align:center;
background-color:#6F6;}
h6{
margin:0;
font-size:12px;}
#calculator{
width:240px;
height:auto;
overflow:hidden;
margin:10px auto;
border:#fff 1px solid;
padding-bottom:10px;
background-color:#9CF;}
#calculator div{
clear:both;}
#calculator ul{
padding:0;
margin:5px 14px;
border:#fff 1px solid;
height:auto;
overflow:hidden;}
#calculator li{
list-style:none;
float:left;
width:32px;
height:32px;
margin:5px;
display:inline;
line-height:32px;
font-size:14px;
background-color:#C36;}
#calculator li.tool{
background-color:#0FC;}
#calculator li:hover{
background-color:#993;
cursor:pointer;}
#calculator li:active{
background-color:#F00;
cursor:pointer;}
#calculator li.tool:active{
background-color:#906;
cursor:pointer;}
#calcu-head{
text-align:left;
padding:10px 15px 5px;}
span.sr{
float:left;
color:#F30;}
span.sr a{
color:#9C0;}
.screen{
width:200px;
height:24px;
line-height:24px;
padding:4px;
border:#306 1px solid;
border-bottom:#699 1px solid;
border-right:#0F0 1px solid;
margin:10px auto;
direction:ltr;
text-align:right;
font-size:16px;
color:#000;
}
#calcu-foot{
text-align:left;
padding:10px 15px 5px;
height:auto;
overflow:hidden;}
span#note{
float:left;
width:210px;
height:auto;
overflow:hidden;
color:yellow;
}
span.welcome{
clear:both;
color:#300;
margin-left:70px;
}
span.welcome a{
float:right;
color:#99F;}
</style>
<script language="javascript">
var num=0,result=0,numshow="0";
var operate=0;
var calcul=0;
var quit=0;
function command(num)
{
var str=String(document.calculator.numScreen.value);
str=(str!="0")?((operate==0)?str:""):"";
str=str+String(num);
document.calculator.numScreen.value=str;
operate=0;
quit=0;
}
function dzero()
{
var String=(document.calculator.numScreen.value);
str=(str!=0)?((operate==0)?str+"00":"0"):"0";
document.calculator.numScreen.value=str;
operate=0;
}
function dot()
{
var str=String(document.calculator.numScreen.value);
str=(str!=0)?((operate=0)?str:"0"):"0";
for(var i=0;i<=str.length;i++)
{
if(str.substr(i,1)==".")
{return false;
}
}
str=str+".";
document.calculator.numScreen.value=str;
operate=0;
}
function del()
{
var str=String(document.calculator.numScreen.value);
str=(str!=0)?str:"";
str=str.substr(0,str.length-1);
str=(str!="")?str:"0";
document.calculator.numScreen.value=str;
}
function clearscreen()
{
num=0;
result=0;
numshow="0";
document.calculator.numScreen.value="0";}
function add()
{
calculate();
operate=1;
calcul=1;}
function sub()
{
calculate();
operate=1;
calcul=2;}
function cheng()
{
calculate();
operate=1;
calcul=3;}
function chu()
{
calculate();
operate=1;
calcul=4;}
function persent()
{
calculate();
operate=1;
calcul=5;}
function equal()
{
calculate();
operate=1;
num=0;
result=0;
numshow="0";}
function calculate()
{
numshow=Number(document.calculator.numScreen.value);
if(num!=0 && quit!=1)
{
switch(calcul)
{
case 1:result=num+numshow;break;
case 2:result=num-numshow;break;
case 3:result=num*numshow;break;
case 4:if(numshow!=0)
{result=num/numshow;}
else
{document.getElementById("note").innerHTML="辈出的书不能为0";setTimeout(clearnote,4000)}break;
case 5:result=num%numshow;break;
}
quit=1;
}
else {
result=numshow;}
numshow=String(result);
document.calculator.numScreen.value=numshow;
num=result;
}
function clearnote()
{
document.getElementById("note").innerHTML="";}
</script>
</head>
<body>
<div id="calculator">
<div id="calcu-head"><span class="sr">©<a href="#" target="_blank">jiaoyong</a><h6>北雁计算器</h6></span></div>
<form name="calculator" action="" method="get">
<div id="calcu-screen">
<input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();"/>
</div>
<div id="calcu-btn">
<ul>
<li onclick="command(7)">7</li>
<li onclick="command(8)">8</li>
<li onclick="command(9)">9</li>
<li class="tool" onclick="del()"><-</li>
<li class="tool" onclick="clearscreen()">C</li>
<li onclick="command(4)">4</li>
<li onclick="command(5)">5</li>
<li onclick="command(6)">6</li>
<li class="tool" onclick="cheng()">*</li>
<li class="tool" onclick="chu()">/</li>
<li onclick="command(1)">1</li>
<li onclick="command(2)">2</li>
<li onclick="command(3)">3</li>
<li class="tool" onclick="add()">+</li>
<li class="tool" onclick="sub()">-</li>
<li onclick="command(0)">0</li>
<li onclick="dzero()">00</li>
<li onclick="dot()">.</li>
<li onclick="persent()" class="tool">%</li>
<li class="tool" onclick="equal()">=</li>
</ul>
</div>
<div id="calcu-foot">
<span class="welcome">欢迎使用<a href="#" target="_blank">谢谢</a></span>
</div>
</form>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算器</title>
<style type="text/css">
body{
font-size:12px;
font-family:Arial,Georgia, "Times New Roman", Times, serif;
color:#00F;
text-align:center;
background-color:#6F6;}
h6{
margin:0;
font-size:12px;}
#calculator{
width:240px;
height:auto;
overflow:hidden;
margin:10px auto;
border:#fff 1px solid;
padding-bottom:10px;
background-color:#9CF;}
#calculator div{
clear:both;}
#calculator ul{
padding:0;
margin:5px 14px;
border:#fff 1px solid;
height:auto;
overflow:hidden;}
#calculator li{
list-style:none;
float:left;
width:32px;
height:32px;
margin:5px;
display:inline;
line-height:32px;
font-size:14px;
background-color:#C36;}
#calculator li.tool{
background-color:#0FC;}
#calculator li:hover{
background-color:#993;
cursor:pointer;}
#calculator li:active{
background-color:#F00;
cursor:pointer;}
#calculator li.tool:active{
background-color:#906;
cursor:pointer;}
#calcu-head{
text-align:left;
padding:10px 15px 5px;}
span.sr{
float:left;
color:#F30;}
span.sr a{
color:#9C0;}
.screen{
width:200px;
height:24px;
line-height:24px;
padding:4px;
border:#306 1px solid;
border-bottom:#699 1px solid;
border-right:#0F0 1px solid;
margin:10px auto;
direction:ltr;
text-align:right;
font-size:16px;
color:#000;
}
#calcu-foot{
text-align:left;
padding:10px 15px 5px;
height:auto;
overflow:hidden;}
span#note{
float:left;
width:210px;
height:auto;
overflow:hidden;
color:yellow;
}
span.welcome{
clear:both;
color:#300;
margin-left:70px;
}
span.welcome a{
float:right;
color:#99F;}
</style>
<script language="javascript">
var num=0,result=0,numshow="0";
var operate=0;
var calcul=0;
var quit=0;
function command(num)
{
var str=String(document.calculator.numScreen.value);
str=(str!="0")?((operate==0)?str:""):"";
str=str+String(num);
document.calculator.numScreen.value=str;
operate=0;
quit=0;
}
function dzero()
{
var String=(document.calculator.numScreen.value);
str=(str!=0)?((operate==0)?str+"00":"0"):"0";
document.calculator.numScreen.value=str;
operate=0;
}
function dot()
{
var str=String(document.calculator.numScreen.value);
str=(str!=0)?((operate=0)?str:"0"):"0";
for(var i=0;i<=str.length;i++)
{
if(str.substr(i,1)==".")
{return false;
}
}
str=str+".";
document.calculator.numScreen.value=str;
operate=0;
}
function del()
{
var str=String(document.calculator.numScreen.value);
str=(str!=0)?str:"";
str=str.substr(0,str.length-1);
str=(str!="")?str:"0";
document.calculator.numScreen.value=str;
}
function clearscreen()
{
num=0;
result=0;
numshow="0";
document.calculator.numScreen.value="0";}
function add()
{
calculate();
operate=1;
calcul=1;}
function sub()
{
calculate();
operate=1;
calcul=2;}
function cheng()
{
calculate();
operate=1;
calcul=3;}
function chu()
{
calculate();
operate=1;
calcul=4;}
function persent()
{
calculate();
operate=1;
calcul=5;}
function equal()
{
calculate();
operate=1;
num=0;
result=0;
numshow="0";}
function calculate()
{
numshow=Number(document.calculator.numScreen.value);
if(num!=0 && quit!=1)
{
switch(calcul)
{
case 1:result=num+numshow;break;
case 2:result=num-numshow;break;
case 3:result=num*numshow;break;
case 4:if(numshow!=0)
{result=num/numshow;}
else
{document.getElementById("note").innerHTML="辈出的书不能为0";setTimeout(clearnote,4000)}break;
case 5:result=num%numshow;break;
}
quit=1;
}
else {
result=numshow;}
numshow=String(result);
document.calculator.numScreen.value=numshow;
num=result;
}
function clearnote()
{
document.getElementById("note").innerHTML="";}
</script>
</head>
<body>
<div id="calculator">
<div id="calcu-head"><span class="sr">©<a href="#" target="_blank">jiaoyong</a><h6>北雁计算器</h6></span></div>
<form name="calculator" action="" method="get">
<div id="calcu-screen">
<input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();"/>
</div>
<div id="calcu-btn">
<ul>
<li onclick="command(7)">7</li>
<li onclick="command(8)">8</li>
<li onclick="command(9)">9</li>
<li class="tool" onclick="del()"><-</li>
<li class="tool" onclick="clearscreen()">C</li>
<li onclick="command(4)">4</li>
<li onclick="command(5)">5</li>
<li onclick="command(6)">6</li>
<li class="tool" onclick="cheng()">*</li>
<li class="tool" onclick="chu()">/</li>
<li onclick="command(1)">1</li>
<li onclick="command(2)">2</li>
<li onclick="command(3)">3</li>
<li class="tool" onclick="add()">+</li>
<li class="tool" onclick="sub()">-</li>
<li onclick="command(0)">0</li>
<li onclick="dzero()">00</li>
<li onclick="dot()">.</li>
<li onclick="persent()" class="tool">%</li>
<li class="tool" onclick="equal()">=</li>
</ul>
</div>
<div id="calcu-foot">
<span class="welcome">欢迎使用<a href="#" target="_blank">谢谢</a></span>
</div>
</form>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- httpClient中的get和post请求
- 鸟哥的Linux私房菜(服务器)- 第十六章、文件服务器之二： SAMBA 服务器
- getjson时使用random= Math.random 解决数据缓存问题
- 如何去掉vi下面显示的[converted]标志
- java 日期和时间
- 穷游 的危险。不可行。
- Windows下批处理方式压缩文件夹为tar.gz的方法
- 鸟哥的Linux私房菜(服务器)- 第十五章、时间服务器： NTP 服务器
- 智慧云停车场项目
- The method setButton(int, CharSequence, Message) in the type AlertDialog is not applicable for the a
- mysql的一些常见命令
- IOS-项目中常见文件介绍
- 鸟哥的Linux私房菜(服务器)- 第十四章、账号控管： NIS 服务器
- django的404，500错误自定义页面的配置
- linux设备驱动归纳总结（四）：1.进程管理的相关概念
- java内部类里面使用static
- A星算法（Java实现）
- 微信支付服务端与客户端
- 鸟哥的Linux私房菜(服务器)- 第十三章、文件服务器之一：NFS 服务器
- Reverse Integer