可以实现基本的加减乘除，三角函数，对数，指数，阶乘，开根号，实现效果如下图：
1.HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
</head>
<body>
<div id="calculator">
<div id="input">
<input type="text" id="Screen" name="Screen" class="screen" value="" readonly>
</div>
<div id="keys">
<input type="button" id="square" onclick="square()" value="x^2" />
<input type="button" id="cube" onclick="cube()" value="x^3" />
<input type="button" id="^" onclick="cal(this.id)" value="^" />
<input type="button" id="factorial" onclick="factorial()" value="n!" />
<input type="button" id="sin" onclick="sin()" value="sin" />
<input type="button" id="cos" onclick="cos()" value="cos" />
<input type="button" id="tan" onclick="tan()" value="tan" />
<input type="button" id="log" onclick="log()" value="log" />
<input type="button" id="sqrt" onclick="sqrt()" value="√" />
<input type="button" id="cbrt" onclick="cbrt()" value="³√" />
<input type="button" id="Back" onclick="back()" value="Back" />
<input type="button" id="C" onclick="clearNum()" value="CE" />
<input type="button" id="7" onclick="cal(this.id)" value="7" />
<input type="button" id="8" onclick="cal(this.id)" value="8" />
<input type="button" id="9" onclick="cal(this.id)" value="9" />
<input type="button" id="/" onclick="cal(this.id)" value="/" />
<input type="button" id="4" onclick="cal(this.id)" value="4" />
<input type="button" id="5" onclick="cal(this.id)" value="5" />
<input type="button" id="6" onclick="cal(this.id)" value="6" />
<input type="button" id="*" onclick="cal(this.id)" value="*" />
<input type="button" id="1" onclick="cal(this.id)" value="1" />
<input type="button" id="2" onclick="cal(this.id)" value="2" />
<input type="button" id="3" onclick="cal(this.id)" value="3" />
<input type="button" id="-" onclick="cal(this.id)" value="-" />
<input type="button" id="." onclick="cal(this.id)" value="." />
<input type="button" id="0" onclick="cal(this.id)" value="0" />
<input type="button" id="=" onclick="equal()" value="=" />
<input type="button" id="+" onclick="cal(this.id)" value="+" />
</div>
</body>
</html>2.CSS代码
#calculator {
background-color: #eeeeee;
border: 1px solid gray;
margin: 30px auto;
width: 300px;
height: 430px;
padding: 15px;
}
.screen {
width: 284px;
height: 40px;
background-color: #fcfdea;
box-shadow: 2px 3px 3px rgb(181, 187, 181) inset;
border-radius: 4px;
text-align: right;
padding-right: 10px;
font-size: 20px;
margin-top: 5px;
border: none;
outline: 1px solid rgb(136, 127, 127);
transition: all .1s;
}
.screen:hover,.screen:focus{
outline: 1px solid rgb(65, 60, 60);
}
#keys {
height: 350px;
margin-top: 25px;
}
input[type="button"] {
float: left;
width: 75px;
height: 50px;
text-align: center;
background-color: #a6acb86c;
cursor: pointer;
}
input[type="button"]:hover{
background-color: #a6acb8;
}
3.JS代码（重头戏）
function cal(num) {
var n = document.getElementById(num)
if (n === null) return
document.getElementById("Screen").value += n.value;
}
var flag = true;
function equal() {
var value = document.getElementById("Screen").value
if (value.indexOf('^') != -1) {
value = this.pow(value, value.indexOf('^'))
}
// 点击'='切换分数/小数
if (!flag) {
document.getElementById("Screen").value = this.decimalToFractional(eval(value))
flag = true
} else {
document.getElementById("Screen").value = eval(value)
flag = false
}
}
function back() {
var n = document.getElementById("Screen");
n.value = n.value.substring(0, n.value.length - 1);
}
function clearNum() {
document.getElementById("Screen").value = "";
}
function sin() {
document.getElementById("Screen").value = Math.sin(document.getElementById("Screen").value);
}
function cos() {
document.getElementById("Screen").value = Math.cos(document.getElementById("Screen").value);
}
function tan() {
document.getElementById("Screen").value = Math.tan(document.getElementById("Screen").value);
}
function log() {
document.getElementById("Screen").value = Math.log(document.getElementById("Screen").value);
}
function sqrt() {
document.getElementById("Screen").value = Math.sqrt(document.getElementById("Screen").value);
}
function cbrt() {
document.getElementById("Screen").value = Math.cbrt(document.getElementById("Screen").value)
}
function square() {
document.getElementById("Screen").value = Math.pow(document.getElementById("Screen").value, 2);
}
function cube() {
document.getElementById("Screen").value = Math.pow(document.getElementById("Screen").value, 3);
}
function pow(value, pos) {
if (pos != -1) {
let arr = value.split("")
let powVal = Math.pow(arr[pos - 1], arr[pos + 1])
arr.splice(pos - 1, 3, powVal)
value = arr.join("")
return value
}
}
// 阶乘
function factorial() {
function func(num) {
if (num == 1) {
console.log(1);
return 1;
} else if (num == 0) {
console.log(0);
return 1;
} else {
return num * func(num - 1)
}
}
document.getElementById("Screen").value = func(document.getElementById("Screen").value)
}
// 小数化为分数
function decimalToFractional(decimal) {
if (decimal % 1 === 0) {
return decimal
}
const formatDecimal = decimal.toFixed(2)
let denominator = 100
let numerator = formatDecimal * 100
let bigger = 0
function recursion() {
bigger = denominator > numerator ? denominator : numerator
for (let i = bigger; i > 1; i--) {
if (
Number.isInteger(numerator / i) && Number.isInteger(denominator / i)) {
numerator = numerator / i
denominator = denominator / i
recursion()
}
}
}
recursion()
return `${numerator} / ${denominator}`
}这里因为按钮用的是input:button，而在实现指数运算（pow(a,b)）时分别需要上一次的输入和下一次的输入，而js获取下一次的输入实现起来比较麻烦，所以为指数运算的按钮(^)并没有直接绑定实现指数运算的方法，而是绑定的cal(this.id)，将指数运算保存起来，在按下“=”时再调用实现指数运算的方法。
在点击“=”得到运算结果后，还可以再次点击“=”，将小数转换为分数（小数为2位精度）。
function equal() {
var value = document.getElementById("Screen").value
if (value.indexOf('^') != -1) {
value = this.pow(value, value.indexOf('^'))
}
// 点击'='切换分数/小数
if (!flag) {
document.getElementById("Screen").value = this.decimalToFractional(eval(value))
flag = true
} else {
document.getElementById("Screen").value = eval(value)
flag = false
}
}