HTML+CSS+JS简易计算器

HTML+CSS+JS简易计算器

index.html

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

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

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

运行结果

相关推荐
鸽鸽程序猿32 分钟前
【前端】CSS
前端·css
ggdpzhk34 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue