HTML程序大全(1):简易计算器

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

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代码,主要设置了背景、计算机板和按钮等等的颜色。

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代码,主要设置了对应按钮按下的显示、计算、清零的工作。

js 复制代码
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);
}

总结:

这是一个简单的计算器,使用HTML、CSS和JavaScript实现。HTML代码创建了一个计算器的界面,CSS代码设置了计算器的样式,JavaScript代码实现了计算器的功能。具体来说,JavaScript代码实现了框架的三个核心功能:

  1. appendToOutput()函数:该函数将按钮的值添加到输出框。
  2. clearOutput()函数:该函数清空输出框。
  3. calculate()函数:该函数使用eval()函数计算输出框中的表达式。

这个计算器可以执行加、减、乘、除和取模运算。同时,它还支持小数点和多位数运算。需要注意的是,eval()函数可能会导致安全问题,因此在实际应用中需要采取安全措施。

相关推荐
斯普信专业组4 分钟前
ceph数据迁移数据迁移与bacula配置调整优化实战
前端·ceph·github
好_快9 分钟前
Lodash源码阅读-baseMatches
前端·javascript·源码阅读
好_快11 分钟前
Lodash源码阅读-baseHasIn
前端·javascript·源码阅读
好_快11 分钟前
Lodash源码阅读-baseIsEqual
前端·javascript·源码阅读
好_快15 分钟前
Lodash源码阅读-getMatchData
前端·javascript·源码阅读
吴永琦(桂林电子科技大学)1 小时前
HTML5
前端·html·html5
爱因斯坦乐1 小时前
【HTML】纯前端网页小游戏-戳破彩泡
前端·javascript·html
恋猫de小郭1 小时前
注意,暂时不要升级 MacOS ,Flutter/RN 等构建 ipa 可能会因 「ITMS-90048」This bundle is invalid 被拒绝
android·前端·flutter
大莲芒5 小时前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react17
前端·react.js·前端框架
木木黄木木7 小时前
html5炫酷3D文字效果项目开发实践
前端·3d·html5