代码地址：https://github.com/sh13523149003/javaScript-calculator
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="calculator.css" rel="stylesheet">
<script src="jquery-3.1.1.js"></script>
<script src="calcalator.js"></script>
</head>
<body>
<div class='container'>
<div id='calculator'>
<div id='title' class='text-center'>
<h5><b>shaochen calculator</b></h5>
</div>
<div id='display' class=text-right>
<div id='entry'>
<p id='answer'>0</p>
</div>
<div id='history'>
<p>0</p>
</div>
</div>
<div id='buttons'>
<button class='red' value='ac'>AC</button>
<button class='red' value='ce'>CE</button>
<button value='/'>÷</button>
<button value='*'>×</button>
<button value='7'>7</button>
<button value='8'>8</button>
<button value='9'>9</button>
<button value='-'>-</button>
<button value='4'>4</button>
<button value='5'>5</button>
<button value='6'>6</button>
<button value='+'>+</button>
<button value='1'>1</button>
<button value='2'>2</button> <button value='3'>3</button>
<button class='invisible' >N</button>
<button id='zerokey' value='0' >0</button>
<button value='.'>.</button>
<button id='equalkey' value='='>=</button>
</div>
</div>
</div>
</body>
</html>
css 部分：
body{
font-family:'Times New Roman', Times, serif;
background-color:gray;
}
#calculator{
width:300px;
height:400px;
background-color: #dff8d0;
margin-top:10%;
margin-left:auto;
margin-right:auto;
border:3px solid #ff8b85;
border-radius:20px;
box-shadow: 7px 10px 37px 2px rgba(0, 0, 0, 0.68), inset -1px -6px 12px 0.1px #89847e;
}
}
#title{
padding-top:20px;
padding-bottom:20px
}
#display{
width:85%;
height:80px;
background-color:gray;
margin-left:auto;
margin-right:auto;
border:2px solid green;
border-radius:10px;
}
#answer{
font-size:30px;
margin-bottom:5px;
margin-right:10px
}
#history{
margin-right:10px
}
#buttons{
font-size: 16px;
font-weight: bold;
color: #fff;
position: absolute;
display: inline-block;
width: 280px;
height: auto;
margin-top: 15px;
margin-left: 15px;
}
button{
border-radius:8px;
border:none;
background-color:gray;
margin:0px 4px 10px 8px;
width:50px;
height:40px;
box-shadow: 0px 3px 0px 0px #222121,
inset -3px -5px 10px 1px #515151;
}
button:active{
transform:translate(0px,3px);
box-shadow:none
}
#equalkey{
position:absolute;
margin-left:50px;
margin-top:-50px;
height:80px;
}
#zerokey{
width:88px
}
.red{
background-color:red;
box-shadow:0px 3px 0px 0px ;
}
button,
button:hover,
button:active,
button:visited {
text-decoration: none !important;
outline: none !important;
}
jQuery 部分：
// JavaScript Document
$(document).ready(function(){
var btn = '';//输入的数
var ans = '';//结果
var cur = '';//当前显示
var his = '';//历史显示
var decimal = true;//控制小数点
//var reset = '';
var reset = false;
///////////////////////////////////////////////////
//如果结果中包含小数点，则保留到小数点后两位；
function round(val) {
val=val.toString().split('');//将逻辑值转换为字符串；
if (val.indexOf('.') !== -1){//判断是否有小数点
var remain=val.slice(val.indexOf('.')+1,val.length)//j截取小数点以后的位数
val=val.slice(0,val.indexOf('.')+1)//截取小数点前面的数字
var i=0;
while(remain[i]<1){
i++;
}
remain=remain.slice(0,i+2);//从小数点不是零开始取两位
if(remain[remain.length-1]==='0'){//如果最后一位是零，则舍弃
remain=remain.slice(0,-1);
}
return val.join('')+remain.join('');
}else{return val.join('');}
}
///////////////////////////////////////////////////
///////////////////////////////////////////////////
$('button').click(function(){
btn= $(this).attr('value');//获取输入的按键
console.log('输入'+btn);
//防止输入多个小数点；
if (btn === '.' || btn === '0.') {
if (!decimal) {
btn = '';
}
}
if (reset) {
if (btn === '/' || btn === '*' || btn === '-' || btn === '+') {
his = ans;
} else {
ans = '';
his = '';
}
}
reset = false;
if (btn === 'ac' || btn === 'ce' && btn === 'noChange') {
ans = '';
cur = '';
btn = '';
his = '';
$('#history').html('0');
$('#answer').html('0');
decimal = true;
} else if (btn === 'ce') {
$('#history').html(his.slice(0, -cur.length));
his = his.slice(0, -cur.length);
ans = ans.slice(0, -cur.length);
cur = ans;
if (his.length === 0 || his === ' ') {
$('#history').html('0');
}
$('#answer').html('0');
btn = '';
decimal = true;
}
if (ans.length === 0 && isNaN(btn) && btn !== '.' || ans.length === 0 && btn === '0') {
entry = '';
ans = '';
}
// prevents extra operators
if (cur !== 'noChange') {
if (cur === '' && isNaN(btn) && btn !== '.' || isNaN(cur) && isNaN(btn) && btr !== '.') {
btn = '';
}
}
////////////////////////////////////////////
//输入是数字的操作
while (Number(btn) || btn === '0') {
if(isNaN(cur) && cur !== '.' && Number(btn)){//当前是非点非数字，并且输入是数字，则将cur清空
cur = '';
}
if (btn === '.') {
decimal = false;
}
if(cur=== '0.' && isNaN(btn)){//当前是0.且输入非法则btn 置〇
btn = '';
}else{
cur += btn;
ans += btn;
his += btn;
$('#answer').html(cur);
$('#history').html(his);
btn = '';
}
}
//////////////////////////////////////////////////////
if (btn === '.') {
if (cur === '' || isNaN(cur[cur.length - 1])) {
cur = '0.';
ans += btn;
$('#answer').html('0.');
his += cur;
$('#history').html(his);
} else {
cur = cur + btn;
ans = ans+btn;
his = ans;
$('#history').html(ans);
$('#answer').html(cur);
}
btn = '';
decimal = false;
}
else if (btn === '/') {
cur = '/';
console.log('当前显示'+cur)
ans = round(eval(ans)) + cur;
his += cur;
$('#history').html(his);
$('#answer').html('/');
btn = '';
decimal = true;
}
else if (btn === '*') {
cur = '*';
ans = round(eval(ans)) + cur;
his += cur;
$('#history').html(his);
$('#answer').html('*');
btn = '';
decimal = true;
}
else if (btn === '-') {
cur = '-';
ans = round(eval(ans)) + cur;
his += cur;
$('#history').html(his);
$('#answer').html('-');
btn = '';
decimal = true;
}
else if (btn === '+') {
cur = '+';
ans = round(eval(ans)) + cur;
his += cur;
$('#history').html(his);
$('#answer').html('+');
btn = '';
decimal = true;
}
else if(btn === '='){
if(cur[cur.length-1] === '.'){
btn = '';
}else{
cur = eval(ans).toString();
$('#answer').html(round(eval(ans)));
ans = round(eval(ans));
his += btn + ans;
$('#history').html(his);
his= ans;
btn= '';
reset=true;
decimal=true;
}
cur = 'noChange';
}
btn = '';
});
});