<html>
<head>
<title>计算器</title>
<style>
.aa {
text-align: center;
font-size: 12px;
margin-top: 10%;
}
body, ul {
margin: 0px;
padding: 0px;
}
body {
background: #AF6332;
background-color: #E6E6E6;
}
li {
list-style: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
/*是用inset可以将外部阴影改成内部阴影;若要实现内外阴影同时存在，将其并在一行用逗号隔开*/
.calBox {
460px;
padding-bottom: 10px;
background: #FDFDFD;
border-radius: 5px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -230px;
margin-top: -225px;
box-shadow: 0px 0px 10px rgba(153,153,153,0.8),0px 0px 10px rgba(0,0,0,0.5) inset;
-webkit-box-shadow: 0px 0px 10px rgba(153,153,153,0.8),0px 0px 10px rgba(0,0,0,0.5) inset;
background: #F9F9F9;
overflow: hidden;
}
input {
406px;
height: 82px;
margin: 10px 7px 0px;
border-radius: 5px;
border: 1px solid #64655F;
box-shadow: 0px 5px 2px rgba(157,157,145,0.8) inset;
-webkit-box-shadow: 0px 5px 2px rgba(157,157,145,0.8) inset;
outline: none;
background: #FCFDEB;
text-align: right;
font-family: "微软雅黑";
font-size: 40px;
padding: 0px 10px;
}
ul {
}
li {
list-style: none;
74px;
height: 34px;
line-height: 34px;
text-align: center;
font-family: "微软雅黑";
border: 1px solid #8B8B8B;
border-radius: 5px;
background: url(img/calBg) repeat-x;
float: left;
margin: 12px 6px 0px;
}
.one li {
height: 44px;
background: url(calBg1.jpg) repeat-x;
line-height: 44px;
cursor: pointer;
}
.one .orange {
background: url(calBg2.jpg) repeat-x;
border: 1px solid #875733;
}
.one .black {
background: url(calBg3.jpg) repeat-x;
border: 1px solid #363636;
color: #fff;
}
.one .gray {
background: url(calBg4.jpg) repeat-x;
border: 1px solid #5F6366;
}
.zero {
160px;
}
.one .deng {
background: url(calBg5.jpg);
height: 100px;
}
.twoBox {
353px;
overflow: hidden;
}
.two {
358px;
}
.calBox .three {
margin: 0px;
}
.calu {
padding: 0px 10px;
470px;
}
</style>
<script>
function findArr(a,c){for(var b=0;b<a.length;b++){if(a[b]==c){return true}}return false}function getClass(d,f){if(document.getElementsByClassName){return d.getElementsByClassName(f)}else{var a=[];var e=document.getElementsByTagName("*");for(var c=0;c<e.length;c++){var b=e[c].className.split(" ");if(findArr(b,f)){a.push(e[c])}}return a}};
window.onload=function()
{
var aNum=getClass(document,'num');
var oText=document.getElementById('text');
var aPer=getClass(document,'oper');
var oPer=document.getElementById('per');
var oText1=document.getElementById('text1');
var oDeng=getClass(document,'deng')[0];
var oSq=getClass(document,'sq')[0];
var oRec=getClass(document,'rec')[0];
var oZheng=getClass(document,'zheng')[0];
var oOn=getClass(document,'on')[0];
var oOff=getClass(document,'off')[0];
var oClea=getClass(document,'clea')[0];
var bOnOrOffClick=false;
function fnNum(a)
{
var bClear=false;
oText.value='0'
for(var i=0;i<aNum.length;i++)
{
aNum[i].onclick=function()
{
if(!bOnOrOffClick)return;
if(bClear)
{
bClear=false;
}
if(oText.value.indexOf('.')!=-1)
{
if(this.innerHTML=='.')
{
return;
}
}
if(oPer.value&&oText.value&&oText1.value=='')
{
oText1.value=oText.value;
oText.value='';
}
var re=/^0.{1}d+$/;
var re1=/^([0]d+)$/;
oText.value+=this.innerHTML;
if(re.test(oText.value))
{
return;
}
if(re1.test(oText.value))
{
oText.value=this.innerHTML;
}
}
//符号部分的添加
for(var j=0;j<aPer.length;j++)
{
aPer[j].onclick=function()
{
if(oText.value&&oPer.value&&oText1.value)
{
var n=eval(oText1.value+oPer.value+oText.value);
oText.value=n;
oText1.value='';
}
oPer.value=this.innerHTML;
}
}
//点击等号的时候
oDeng.onclick=function()
{
//+-*/%的情况
if(oText1.value==''&&oPer.value==''&&oText.value=='')
{
return;
}
var n=eval(oText1.value+oPer.value+oText.value);
oText.value=n;
oText1.value='';
oPer.value='';
bClear=true;
}
//点击开根号的时候
oSq.onclick=function()
{
var m=Math.sqrt(oText.value);
oText.value=m;
}
//点击倒数的时候
oRec.onclick=function()
{
var a=1/oText.value;
if(oText.value=='0')
{
a='正无穷'
}
oText.value=a;
}
//正负号的时候
oZheng.onclick=function()
{
if(oText.value>0)
{
oText.value=-oText.value;
}
else
{
oText.value =-oText.value;
}
}
//清屏的时候
oClea.onclick=function()
{
oText.value='0';
oText1.value='';
oPer.value='';
}
}
}
//on时
oOn.onclick=function()
{
bOnOrOffClick=true;
fnNum(bOnOrOffClick);
alert("开机成功！");
}
//off时
oOff.onclick=function()
{
bOnOrOffClick=false;
fnNum(bOnOrOffClick);
oText.value = '';
alert("关机成功！");
}
}
</script>
</head>
<body>
<div class="aa">记的先点开机</div>
<div class="calBox">
<div class="calu">
<input type="text" id="text">
<ul class="one clearfix">
<li class="orange on">开机</li>
<li class="orange off">关机</li>
<li class="orange clea">清屏</li>
<li class="orange zheng">+/-</li>
<li class="orange rec">1/x</li>
<li class="num">7</li>
<li class="num">8</li>
<li class="num">9</li>
<li class="gray oper">/</li>
<li class="orange oper">%</li>
<li class="num">4</li>
<li class="num">5</li>
<li class="num">6</li>
<li class="gray oper">*</li>
<li class="orange sq">√</li>
<!-- -->
</ul>
<div class="clearfix">
<div class="twoBox fl">
<ul class="one fl two">
<li class="num">1</li>
<li class="num">2</li>
<li class="num">3</li>
<li class="gray oper">-</li>
<li class="zero num">0</li>
<li class="num">.</li>
<li class="gray oper">+</li>
</ul>
</div>
<ul class="one three clearfix fl">
<li class="orange deng fl">=</li>
</ul>
</div>
</div>
</div>
<input type="text" id="per" style="display:none">
<input type="text" id="text1" style="display:none">
</body>
</html>