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 分钟前
Next.js 教程系列(十六)Next.js 中的状态管理方案
前端·next.js
前端小巷子6 分钟前
web实现文件的断点续传
前端·javascript·面试
小磊哥er7 分钟前
【前端工程化】前端项目怎么做代码管理才好?
前端
jojo是只猫1 小时前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机5 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程9 小时前
2025前端面试题
前端·面试
前端小趴菜0510 小时前
React - createPortal
前端·vue.js·react.js
晓131310 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo11 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴11 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript