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:
text-align:center;
background:
}
h6{
margin:0;
font-size:12px;
}
width:94%;
height:auto;
overflow:hidden;
margin:10px auto;
border:
padding-bottom:10px;
background-color:
}
clear:both;
}
padding:0;
margin:5px 14px;
border:
height:auto;
overflow:hidden;
}
list-style:none;
float :left;
width:14.43%;
margin:0.5%;
display:inline;
line-height:32px;
font-size:32px;
background:
padding:2.28%;
}
background:
}
background-color:
}
background-color:
cursor:pointer;
}
background-color:
cursor:pointer;
}
background-color:
cursor:pointer;
}
text-align:left;
padding:10px 15px 5px;
}
.screen {
width:97%;
height:42px;
line-height:42px;
padding:4px;
border:
border-bottom:
border-right:
margin:10px auto;
text-align:right;
padding-left:20px;
font-size:3em;
color:
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;
}
复制代码
转载于:https://juejin.im/post/5c481c50f265da616720a0c1