div+js实现一个计算器代码
代码语言:html
所属分类:其他
代码描述:div+js实现一个计算器代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=PT+Mono&family=Rubik&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 10px; background: #232323; } @media (max-width: 576px) { body { height: 100h; } } .calc { width: 50em; aspect-ratio: 1/1.5; margin: 2em; background: #232323; background: #CED4CA; background: #EBECE9; padding: 4em; border-radius: 1em; display: flex; flex-direction: column; gap: 2em; box-shadow: rgba(0, 0, 0, 0.15) 0.3em 0.3em 0.8em 0px inset, rgba(0, 0, 0, 0.15) -0.3em 0em 0.8em 0em inset, rgba(0, 0, 0, 0.25) 0.3em 0.3em 0.8em 0px; } @media (max-width: 576px) { .calc { padding: 2.5em; } } .calc .result { height: 12em; background: pink; width: 100%; background: linear-gradient(-30deg, rgba(34, 33, 38, 0.1), rgba(34, 33, 38, 0), rgba(34, 33, 38, 0.1)) 100% 0%/100% 100%, #DBE7E5; box-shadow: rgba(0, 0, 0, 0.2) 0.3em 0.3em 0.6em 0px inset, rgba(0, 0, 0, 0.25) -3px -3px 0.6em 0.1em inset, rgba(0, 0, 0, 0.25) 0px 0em 1.2em 0px inset, rgba(0, 0, 0, 0.25) 0px 0.3em 0.2em 0px inset, rgba(255, 255, 255, 0.85) 0px 0.3em 0.2em 0px; background-repeat: no-repeat; padding: 2em; } @media (max-width: 576px) { .calc .result { height: 10em; } } .calc .result .result__inner { text-shadow: 0.15em 0.15em rgba(0, 0, 0, 0.25); display: flex; justify-content: flex-end; align-items: flex-end; color: #2A3027; height: 100%; font-family: "PT Mono", monospace; display: flex; flex-direction: column; justify-content: space-evenly; } .calc .result .result__inner .prev-operand { font-size: 2em; } .calc .result .result__inner .current-operand { font-size: 4em; font-size: clamp(1.25rem, 0.5368rem + 3.17vw, 2.5rem ); font-size: clamp(1.375rem, 0.7338rem + 2.85vw, 2.5rem ); font-size: clamp(1.5625rem, 1.027rem + 2.38vw, 2.5rem ); } .calc .keys { width: 100%; flex-grow: 2; } .calc .keys__inner { height: 100%; gap: 1.5em; } .calc .key { color: rgba(0, 0, 0, 0.7); border: unset; box-shadow: rgba(0, 0, 0, 0.15) 0.03em 0.03em 0.1em 0px, rgba(0, 0, 0, 0.15) 0.01em 0.01em 0.1em 0px, rgba(255, 255, 255, 0.55) 0em 0em 0.5em 10px inset; font-family: "Rubik", sans-serif; font-size: 4em; font-size: clamp(1rem, 0.3228rem + 3.01vw, 2.1875rem ); background: #fff; background: #EBECE9; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center; border-radius: 0.1em; transition: all 0.25s ease; } .calc .key__row { height: 100%; display: grid; width: 100%; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 1fr); gap: 1.5em; } @media (max-width: 576px) { .calc .key__row { gap: 0.8em; } } @media (max-width: 576px) { .calc .key { box-shadow: rgba(0, 0, 0, 0.15) 0.03em 0.03em 0.1em 0px, rgba(0, 0, 0, 0.15) 0.01em 0.01em 0.1em 0px, rgba(255, 255, 255, 0.25) 0em 0em 0.5em 10px inset; } } .calc .key:hover { box-shadow: rgba(0, 0, 0, 0.05) 0.03em 0.03em 0.1em 0px, rgba(0, 0, 0, 0.05) 0.01em 0.01em 0.1em 0px, rgba(255, 255, 255, 0.55) 0em 0em 0.5em 10px inset; } .calc .key[data-number] { font-size: clamp(1.5625rem, 1.027rem + 2.38vw, 2.5rem ); } .calc .key:nth-of-type(1) { background-color: #C34F61; box-shadow: unset; box-shadow: rgba(0, 0, 0, 0.45) 0.03em 0.03em 0.1em 0px, rgba(0, 0, 0, 0.25) 0.01em 0.01em 0.1em 0px, rgba(225, 167, 176, 0.25) 0em 0em 0.5em 10px inset, rgba(0, 0, 0, 0.15) 0.03em 0.03em 0.1em 0px inset; color: #fff; } .calc .key:nth-of-type(1):hover { box-shadow: rgba(0, 0, 0, 0.15) 0.03em 0.03em 0.1em 0px, rgba(0, 0, 0, 0.05) 0.01em 0.01em 0.1em 0px, rgba(225, 167, 176, 0.25) 0em 0em 0.5em 10px inset; } .calc .key:nth-of-type(16) { grid-row: 4/6; grid-column: 4/4; } </style> </head> <body> <div class="calc"> <div class="result"> <div class="result__inner"> <div data-prev-operand class="prev-operand"> </div> <div data-current-operand class="current-operand"> </div> </div> </div> <div class="keys"> <div class="keys__inner"> <div class="key__row"> <button data-clear class="key">AC</button> <button data-operator="**" class="key">x<sup>2</sup></button> <button data-operator="/" class="key">÷</button> <button data-operator="*" class="key">X</button> <button data-number class="key">7</button> <button data-number class="key">8</button> <button data-number class="key">9</button> <button data-operator="-" class="key">-</button> <button data-number class="key">4</button> <button data-number class="key">5</button> <button data-number class="key">6</button> <button data-operator="+" class="key">+</button> <button data-number class="key">1</button> <button data-number class="key">2</button> <button data-number class="key">3</button> <button data-equals class="key">=</button> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0