It can realize basic addition, subtraction, multiplication and division, trigonometric functions, logarithms, exponents, factorials, and square root numbers. The effect is as follows:
1.HTML code
<!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 code
#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 code (highlight)
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}`
}Here, because the button uses input:button, the previous input and the next input are required when implementing the exponential operation (pow(a,b)), and it is more troublesome for js to obtain the next input, so for The button (^) of exponential calculation is not directly bound to realize the method of exponential calculation, but the bound cal(this.id), which saves the exponential calculation and calls the method of realizing exponential calculation when "=" is pressed .
After clicking "=" to get the operation result, you can also click "=" again to convert decimals to fractions (decimals have 2 digits of precision).
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
}
}