calculator.html
计算器计算器
- 7
- 8
- 9
- ←
- C
- 4
- 5
- 6
- ×
- ÷
- 1
- 2
- 3
- +
- -
- 0
- 00
- .
- %
- =
calculator.css
@charset 'utf-8';
body{
font-size:12px;
font-family:"Times New Roman",Times, serif:color:#555;
text-align:center;
background:#e2e2e2;
}
h6{
margin:0;
font-size:12px;
}
#calculator{
width:94%;
height:auto;
overflow:hidden;
margin:10px auto;
border:#fff 1px solid;
padding-bottom:10px;
background-color:#f2f2f2;
}
#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:14.43%;
margin:0.5%;
display:inline;
line-height:32px;
font-size:32px;
background:#eaeaea;
padding:2.28%;
}
#calculator li.tool{
background:#738FD8;
}
#calculator li.D06A15{
background-color:#D06A15;
}
#calculator li:hover{
background-color:#f9f9f9;
cursor:pointer;
}
#calculator li:active{
background-color:#fc0;
cursor:pointer;
}
#calculator li.tool:active{
background-color:#d8e8ff;
cursor:pointer;
}
#calcu-head{
text-align:left;
padding:10px 15px 5px;
}
.screen {
width:97%;
height:42px;
line-height:42px;
padding:4px;
border:#e6e6e6 1px solid;
border-bottom:#f2f2f2 1px solid;
border-right:#f2f2f2 1px solid;
margin:10px auto;
text-align:right;
padding-left:20px;
font-size:3em;
color:#999;
direction:ltr;
}
calculator.js
var resultDom=document.getElementById("result");
var dotFlag=true;
var opFlag=true;
var equFlag=true;
function command(num){
if(!equFlag){
resultDom.value="0";
equFlag=true;
}
opFlag=true;
var str=resultDom.value;
str=(str=="0"?"":str);
resultDom.value=str+num;
};
//+ - * /
function op(op){
if(opFlag){
resultDom.value+=op;
dotFlag=true;
opFlag=false;
equFlag=true;
}
};
//小数点
function dot(){
if(dotFlag){
//拿到文本框的值
var num=resultDom.value;
resultDom.value=num+".";
dotFlag=false;
}
}
//运算
function equal(){
var num=resultDom.value;
resultDom.value=eval(num);
var r=resultDom.value;
dotFlag=(r.indexOf(".")==-1?true:false);
opFlag=true;
equFlag=false;
}
function dzero(){
var num = resultDom.value;//获取文本框的值
if(num=="0"){
return;//如果等返回000
}
var str = resultDom.value;
resultDom.value = str + "00";
};
//清空
function clearzero(){
resultDom.value="0";
opFlag=true;
dotFlag=true;
}
//后退
function del(){
var val=resultDom.value;
if(!val){return;}
var str=val.substring(0,val.length-1);
if(str && /[\.|\+|\-|\*|\/|\%]$/.test(str)){
resultDom.value = str.replace(/[\.|\+|\-|\*|\/|\%]$/,"")||0;
dotFlag = true;//小数点锁打开
}else{
resultDom.value = str||0;
}
}
//百分号
function getPercent(num) {
var val=resultDom.value;
var add=val.indexOf("+");
var sub=val.indexOf("-");
var mul=val.indexOf("*");
var divide=val.indexOf("/");
var max = Math.max(add,sub,mul,divide);
var lastStr = val.substring(max+1,val.length);
var beforeStr = val.substring(0,max+1);
var percent = lastStr/100;
resultDom.value = beforeStr+percent;
}
calculator.gif
本文参阅网上资料,经过修改与优化完成,如有bug欢迎指出。