html语言制作简单计算器,html+css+js制作一个简易计算器

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欢迎指出。