当前位置：首页 > news >正文

html 计算器界面

news 2025/7/21 1:41:28

其他链接：
https://www.freecodecamp.org/news/how-to-build-an-html-calculator-app-from-scratch-using-javascript-4454b8714b98/
https://codepen.io/pen/tour/welcome/start

计算器

下面展示一些 内联代码片。

<!DOCTYPE html>
<html lang="en"><!--https://www.freecodecamp.org/news/how-to-build-an-html-calculator-app-from-scratch-using-javascript-4454b8714b98/ https://codepen.io/pen/tour/welcome/start -->
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* // NOTE: You don't need to mess around with // CSS to follow the tutorial. Focus on the // JavaScript instead!// =========================// Some personal resets */html {box-sizing: border-box;}*,*::before,*::after {box-sizing: inherit;}body {margin: 0;}/* Responsive Images */embed,iframe,img,object,video {max-width: 100%;}h1,h2,h3,h4,h5,h6,ul,ol,li,p,pre,blockquote,figure,hr {margin: 0;padding-right: 0;padding-left: 0;}a {text-decoration: none;}a:focus {outline: none;}h1,h2,h3,h4,h5,h6 {display: block;}/* Removes all decimals and discs from lists */ol,ul {list-style: none;}/* * Completely resets form items* ----------------------------* Super hard reset that removes all borders* and radiuses of all form items (including* checkboxes and radios)*/input,textarea,button {border: 0;border-radius: 0;background-color: transparent;font-size: inherit;font-family: inherit;font-weight: inherit;outline: none;appearance: none;text-align: left;}input:hover,input:active,input:focus,textarea:hover,textarea:active,textarea:focus,button:hover,button:active,button:focus {outline: none;}:root {font-family: Helvetica, Arial, sans-serif;}html {font-size: 175%;font-weight: 300;line-height: 1.3;}body {align-items: center;background-image: linear-gradient(236deg, #74ebd5, #acb6e5);display: flex;height: 100vh;justify-content: center;}.container {max-width: 20em;}.container > p {text-align: center;}.calculator {border-radius: 12px;box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.15);margin-left: auto;margin-right: auto;margin-top: 2em;max-width: 15em;overflow: hidden;}.calculator__display {background-color: #222222;color: #fff;font-size: 1.714285714em;padding: 0.5em 0.75em;text-align: right;}.calculator__keys {background-color: #999;display: grid;grid-gap: 1px;grid-template-columns: repeat(4, 1fr);}.calculator__keys > * {background-color: #fff;padding: 0.5em 1.25em;position: relative;text-align: center;}.calculator__keys > *:active::before,.calculator__keys > .is-depressed::before {background-color: rgba(0, 0, 0, 0.2);bottom: 0;box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5) inset;content: "";left: 0;opacity: 0.3;position: absolute;right: 0;top: 0;z-index: 1;}.key--operator {background-color: #eee;}.key--equal {background-image: linear-gradient(to bottom, #fe886a, #ff7033);grid-column: -2;grid-row: 2 / span 4;}</style>
</head>
<body><div class="container"><div class="calculator"><div class="calculator__display">0</div><div class="calculator__keys"><button class="key--operator" data-action="add">+</button><button class="key--operator" data-action="subtract">-</button><button class="key--operator" data-action="multiply">&times;</button><button class="key--operator" data-action="divide">÷</button><button>7</button><button>8</button><button>9</button><button>4</button><button>5</button><button>6</button><button>1</button><button>2</button><button>3</button><button>0</button><button data-action="decimal">.</button><button data-action="clear">AC</button><button class="key--equal" data-action="calculate">=</button></div></div></div><script>console.log("start");const calculator = document.querySelector('.calculator');console.log(calculator);const keys = calculator.querySelector('.calculator__keys');keys.addEventListener('click', e => {if (e.target.matches('button')) {// Do somethingconst key = e.target  const action = key.dataset.action  // 得到动作  +-*/// 如果不是action，则是数字if (!action) {console.log('number key!')}if (action === 'add' ||action === 'subtract' ||action === 'multiply' ||action === 'divide') {console.log('operator key!')}}})</script>
</div></body>
</html>