HTML程序大全(1)：简易计算器-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML程序大全(1)：简易计算器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

HTML代码，主要创建了几个按钮。

<div class="container">
  <div class="output" id="output">0</div>
  <button class="button" onclick="clearOutput()" id="clear">C</button>
  <button class="button" onclick="appendToOutput('%')">%</button>
  <button class="button" onclick="appendToOutput('/')">/</button>
  <button class="button" onclick="appendToOutput('*')">*</button>
  <button class="button" onclick="appendToOutput('7')">7</button>
  <button class="button" onclick="appendToOutput('8')">8</button>
  <button class="button" onclick="appendToOutput('9')">9</button>
  <button class="button" onclick="appendToOutput('-')">-</button>
  <button class="button" onclick="appendToOutput('4')">4</button>
  <button class="button" onclick="appendToOutput('5')">5</button>
  <button class="button" onclick="appendToOutput('6')">6</button>
  <button class="button" onclick="appendToOutput('+')">+</button>
  <button class="button" onclick="appendToOutput('1')">1</button>
  <button class="button" onclick="appendToOutput('2')">2</button>
  <button class="button" onclick="appendToOutput('3')">3</button>
  <button class="button equals" onclick="calculate()">=</button>
  <button class="button" onclick="appendToOutput('0')">0</button>
  <button class="button" onclick="appendToOutput('.')">.</button>
</div>

CSS代码，主要设置了背景、计算机板和按钮等等的颜色。

body { /*背景*/
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
}

.container { /*计算机板*/
  margin: auto;
  margin-top: 100px;
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: 0px 0px 10px #ccc;
}

.output { /*输入或者按下的内容字体*/
  font-size: 2em;
  text-align: right;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.button { /*正常按钮*/
  font-size: 1.5em;
  margin: 5px;
  width: 50px;
  height: 50px;
  border: none;
  background-color: #ccc;
  color: #fff;
  cursor: pointer;
}

.button:hover { /*鼠标碰到按钮时按钮变色*/
  background-color: #999;
}

.clear { /*清屏*/
  background-color: #ff6666;
}

.equals { /*等于号颜色*/
  background-color: #666666;
}

javascript代码，主要设置了对应按钮按下的显示、计算、清零的工作。

let output = document.getElementById("output"); // 输入内容

function appendToOutput(value) {
  if (output.innerHTML === "0") {
    output.innerHTML = value; // 直接显示
  } else {
    output.innerHTML += value; // 列出一个算式
  }
}

function clearOutput() { // 清零
  output.innerHTML = "0";
}

function calculate() { // 计算
  output.innerHTML = eval(output.innerHTML);
}