calculator.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="utf-8">
<meta name="Generator" content="">
<meta name="Keywords" content="">
<meta name="author" content="">
<title>计算器</title>
<link th:href="@{/static/css/calculator/calculator.css}" rel="stylesheet">
</head>
<body>
<div id="calculator">
<div id="calcu-header"><h1>计算器</h1></div>
<div id="calcu-screen">
<input type="text"name="numScreen" id="result" class="screen" value="0" onfocus="this.flur();"disabled="disabled"/>
</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="clearzero()">C</li>
<li onclick="command(4)">4</li>
<li onclick="command(5)">5</li>
<li onclick="command(6)">6</li>
<li class="tool" onclick="op('*')">×</li>
<li class="tool" onclick="op('/')">÷</li>
<li onclick="command(1)">1</li>
<li onclick="command(2)">2</li>
<li onclick="command(3)">3</li>
<li class="tool" onclick="op('+')">+</li>
<li class="tool" onclick="op('-')">-</li>
<li onclick="command(0)">0</li>
<li onclick="dzero()">00</li>
<li onclick="dot()">.</li>
<li class="tool" onclick="getPercent('%')">%</li>
<li class="tool D06A15" onclick="equal()">=</li>
</ul>
<div id="audioBox"></div>
</div>
</div>
<script type="text/javascript" th:src="@{/static/js/calculator/calculator.js}"></script>
</body>
</html>
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欢迎指出。
网友评论