引言
在 Web 开发中，利用 JavaScript 可以轻松地实现各种功能，包括制作一个简易的计算器。本文将详细介绍如何使用 HTML 和 JavaScript 来创建一个简单的在线计算器，并解释其中的关键代码和技术点。
效果图
1. HTML 结构
首先，我们需要构建计算器的 HTML 结构。我们将使用一个包含按钮和输入框的表单来创建这个计算器。
HTML 代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JavaScript计算器</title>
<style>
/* 样式代码 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font: 14px Arial, sans-serif;
}
html {
height: 100%;
background-color: #ddd;
}
#big {
margin: 15px auto;
width: 330px;
height: 470px;
background-color: #789;
border: 1px solid #342;
padding: 15px;
}
#top {
height: 20px;
}
#title {
float: left;
line-height: 30px;
}
#author {
float: right;
line-height: 30px;
}
#import {
margin-top: 15px;
}
#dataname {
margin-top: 5px;
width: 300px;
height: 40px;
text-align: right;
padding-right: 10px;
font-size: 20px;
}
#key {
border: 1px solid #ddd;
height: 293px;
margin-top: 25px;
padding: 16px;
}
.buttons {
float: left;
width: 52px;
height: 36px;
text-align: center;
background-color: #eee;
margin: 0 18px 20px 0;
}
.buttons:hover {
color: white;
background-color: blue;
}
#bottom {
margin-top: 20px;
height: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="big">
<div id="top">
<span id="title">JavaScript计算器</span>
<span id="author">@飞扬设计开发</span>
</div>
<div id="import">
<div id="data"><input type="text" id="dataname"></div>
</div>
<div id="key">
<!-- 数字和运算符按钮 -->
<input type="button" id="CE" onclick="clearnum()" value="CE" class="buttons">
<input type="button" id="C" onclick="clearnum()" value="C" class="buttons">
<input type="button" id="Back" onclick="back()" value="Back" class="buttons">
<input type="button" id="/" onclick="calc(this.id)" value="/" class="buttons" >
<input type="button" id="7" onclick="calc(this.id)" value="7" class="buttons">
<input type="button" id="8" onclick="calc(this.id)" value="8" class="buttons">
<input type="button" id="9" onclick="calc(this.id)" value="9" class="buttons">
<input type="button" id="*" onclick="calc(this.id)" value="*" class="buttons" >
<input type="button" id="4" onclick="calc(this.id)" value="4" class="buttons">
<input type="button" id="5" onclick="calc(this.id)" value="5" class="buttons">
<input type="button" id="6" onclick="calc(this.id)" value="6" class="buttons">
<input type="button" id="-" onclick="calc(this.id)" value="-" class="buttons" >
<input type="button" id="1" onclick="calc(this.id)" value="1" class="buttons">
<input type="button" id="2" onclick="calc(this.id)" value="2" class="buttons">
<input type="button" id="3" onclick="calc(this.id)" value="3" class="buttons">
<input type="button" id="+" onclick="calc(this.id)" value="+" class="buttons" >
<input type="button" id="±" onclick="calc(this.id)" value="±" class="buttons">
<input type="button" id="0" onclick="calc(this.id)" value="0" class="buttons">
<input type="button" id="." onclick="calc(this.id)" value="." class="buttons">
<input type="button" id="=" onclick="eva()" value="=" class="buttons" >
</div>
<div id="bottom">
<span id="welcome">欢迎使用JavaScript计算器</span>
</div>
</div>
<script>
var number = 0; // 定义第一个输入的数据
function calc(number) {
// 获取当前输入
if (number == "%") {
document.getElementById('dataname').value = Math.round(document.getElementById('dataname').value) / 100;
} else {
document.getElementById('dataname').value += document.getElementById(number).value;
}
}
function eva() {
// 计算输入结果
document.getElementById("dataname").value = eval（document.getElementById("dataname").value);
}
function clearnum() {
// 清零
document.getElementById("dataname").value = null;
document.getElementById("dataname").focus();
}
function back() {
// 退格
var arr = document.getElementById("dataname");
arr.value = arr.value.substring(0, arr.value.length - 1);
}
</script>
</body>
</html>2. JavaScript 功能实现
接下来，我们来解释一下 JavaScript 的功能实现部分。
2.1 calc(number) 函数
这个函数负责将用户点击的数字或运算符添加到输入框中。
function calc(number) {
// 如果点击的是百分号，则将输入框的值转换为百分数
if (number == "%") {
document.getElementById('dataname').value = Math.round(document.getElementById('dataname').value) / 100;
} else {
// 否则，将点击的值追加到输入框中
document.getElementById('dataname').value += document.getElementById(number).value;
}
}2.2 eva() 函数
此函数用于计算输入框中的表达式，并将结果显示在输入框中。
function eva() {
document.getElementById("dataname").value = eval（document.getElementById("dataname").value);
}2.3 clearnum() 函数
此函数用于清除输入框中的内容。
function clearnum() {
document.getElementById("dataname").value = null;
document.getElementById("dataname").focus();
}2.4 back() 函数
此函数用于删除输入框中的最后一个字符。
function back() {
var arr = document.getElementById("dataname");
arr.value = arr.value.substring(0, arr.value.length - 1);
}3. CSS 样式
为了使计算器看起来更美观，我们还为计算器添加了一些基本的 CSS 样式。
CSS 代码：
/* 样式代码 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font: 14px Arial, sans-serif;
}
html {
height: 100%;
background-color: #ddd;
}
#big {
margin: 15px auto;
width: 330px;
height: 470px;
background-color: #789;
border: 1px solid #342;
padding: 15px;
}
#top {
height: 20px;
}
#title {
float: left;
line-height: 30px;
}
#author {
float: right;
line-height: 30px;
}
#import {
margin-top: 15px;
}
#dataname {
margin-top: 5px;
width: 300px;
height: 40px;
text-align: right;
padding-right: 10px;
font-size: 20px;
}
#key {
border: 1px solid #ddd;
height: 293px;
margin-top: 25px;
padding: 16px;
}
.buttons {
float: left;
width: 52px;
height: 36px;
text-align: center;
background-color: #eee;
margin: 0 18px 20px 0;
}
.buttons:hover {
color: white;
background-color: blue;
}
#bottom {
margin-top: 20px;
height: 20px;
text-align: center;
}结论
通过本文，我们学习了如何使用 HTML 和 JavaScript 构建一个简易的在线计算器。从 HTML 结构的设计到 JavaScript 功能的实现，再到 CSS 样式的美化，每一个步骤都至关重要。希望这篇教程能帮助你理解如何利用前端技术创建实用的小工具。
扩展阅读
- MDN Web Docs - HTML
- MDN Web Docs - JavaScript
- MDN Web Docs - CSS
- W3Schools - JavaScript Tutorial
- W3Schools - CSS Tutorial
- W3Schools - HTML Tutorial
