HTML+CSS+JS简易计算器
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简易计算器</title><link rel="stylesheet" href="index.css"><script src="index.js" defer></script>
</head><body><div class="toggle"></div><div class="calculator"><div class="button"><h2 id="result"></h2><span id="clear">Clear</span><span>/</span><span>*</span><span>7</span><span>8</span><span>9</span><span>-</span><span>4</span><span>5</span><span>6</span><span id="plus">+</span><span>1</span><span>2</span><span>3</span><span>0</span><span>00</span><span>.</span><span id="equal">=</span></div></div></body></html>
index.css
* {margin: 0;padding: 0;box-sizing: border-box;font-family: consolas;
}body {display: flex;justify-content: center;align-items: center;background-color: #edf1f4;
}.calculator {position: relative;margin-top: 50px ;width: 340px;padding: 20px;border-radius: 20px;box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 20px #fffb;
}.calculator .button {position: relative;display: grid;
}.calculator .button #result {padding: 0 20px;position: relative;left: 8px;grid-column: span 4;height: 100px;line-height: 100px;border-radius: 10px;text-align: end;font-size: 2em;color: rgb(11, 155, 107);overflow: hidden;font-weight: 500;width: calc(100% - 16px);user-select: none;box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.1),inset -5px -5px 20px #fff;
}.calculator .button span {position: relative;display: flex;justify-content: center;align-items: center;padding: 10px;border-radius: 10px;margin: 10px;min-width: 40px;font-size: 1.2em;border: 2px solid #e2ecf3;box-shadow: 5px 5px 10px #a7cbe5, -5px -5px 10px #e9ecef;cursor: pointer;user-select: none;
}.calculator .button span:active {color: #739fea;box-shadow: inset 5px 5px 10px #a7cbe5, inset -5px -5px 10px #e9ecef;
}.calculator .button span#clear {grid-column: span 2;background-color: #f44336;border: 2px solid #cfe4f4;color: #fff;
}.calculator .button span#plus {grid-row: span 2;background-color: #31a935;border: 2px solid #cfe4f4;color: #fff;
}.calculator .button span#equal {background: #2196f3;border: 2px solid #cfe4f4;color: #fff;
}.calculator .buttons span#clear:active,
.calculator .buttons span#plus:active,
.calculator .buttons span#equal:active {box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1),-5px -5px 10px #fff,inset 5px 5px 10px rgba(0, 0, 0, 0.1);
}.toggle {position: fixed;top: 20px;right: 20px;background-color: #4b494c;width: 40px;height: 40px;border-radius: 50%;cursor: pointer;border: 2px solid #edf1f4;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1),-5px -5px 10px #fff;
}.dark .toggle {background: #edf1f4;border: 2px solid #333;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),-5px -5px 10px rgba(255, 255, 255, 0.25);
}
.dark
{background: #282c2f;
}
.dark .calculator
{background: #33393e;box-shadow: 15px 15px 20px rgba(0,0,0,0.25),-15px -15px 20px rgba(255,255,255,0.1);
}
.dark .calculator #value
{color: #eee;box-shadow: inset 5px 5px 10px rgba(0,0,0,0.5),inset -5px -5px 20px rgba(255,255,255,0.1);
}
.dark .calculator .buttons span
{color: #eee;border: 2px solid #333;box-shadow: 5px 5px 10px rgba(0,0,0,0.25),-5px -5px 10px rgba(255,255,255,0.1);
}
.dark .calculator .buttons span:active
{box-shadow: inset 5px 5px 10px rgba(0,0,0,0.25),inset -5px -5px 10px rgba(255,255,255,0.1);
}
.dark .calculator .buttons span#clear,
.dark .calculator .buttons span#plus,
.dark .calculator .buttons span#equal
{border: 2px solid #333;;
}
.dark .calculator .buttons span#clear:active,
.dark .calculator .buttons span#plus:active,
.dark .calculator .buttons span#equal:active
{box-shadow: inset 5px 5px 10px rgba(0,0,0,0.1);
}
idnex.js
const button = document.querySelector('.button');
const btn = button.querySelectorAll('span');
const result = document.getElementById('result');
const toggle = document.querySelector('.toggle');
const body = document.querySelector('body');for (let i = 0; i < btn.length; i++) {btn[i].addEventListener("click", function () {if (this.innerHTML == "=") {result.innerHTML = eval(result.innerHTML);} else {if (this.innerHTML == 'Clear') {result.innerHTML = " ";}else{result.innerHTML += this.innerHTML}}})
}
toggle.onclick = function(){body.classList.toggle('dark')
}
运行结果
