HTML+CSS+JS简易计算器

news2024/9/22 11:38:23

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')
}