数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用HTML、CSS和JavaScript创建计算器
要使用HTML、CSS和Javascript创建一个计算器，我们需要对HTML、CSS和JavaScript的工作原理有基本的了解。计算器是一个简单的工具，它执行基本的算术计算，例如加法、减法、乘法和除法。在本文中，我们将讨论如何使用HTML、CSS和JavaScript来创建一个计算器。通常，如果我们观察任何实时的计算器，我们知道它有
- 一个数字网格（0-9和00）。
- 基本的算术运算符（+、-、/、x、%）。
- 一些用于特殊运算的符号，例如（清除、退格和等于）
我们实时计算器的输出将如下所示
HTML的使用
在本文中，为了创建一个计算器，我们使用HTML来创建基本结构。使用HTML，我们创建了一个输入字段、显示区域和按钮。
CSS的使用
我们使用CSS来设计使用HTML创建的计算器的基本结构，使其更易于用户使用，并使其看起来更好。CSS有助于以有组织的方式定位和排列按钮、显示区域和输入字段，并负责字体、颜色、背景颜色、填充、边距等。
JavaScript的使用
在本文中，为了创建计算器，我们使用了JavaScript来为每个按钮添加功能，并对用户输入做出响应。我们使用Javascript添加了点击事件和键盘输入，以便每个组件都能执行其各自的功能。
使用HTML、CSS和JS创建计算器
下面是我们用来创建计算器的HTML、CSS和JavaScript的完整示例代码。它提供了它们正在执行的功能的分步解释。
HTML代码
这是我们计算器的HTML文件。在这里，我们使用HTML来创建计算器UI的内容。我们包括计算器的按钮、输入字段和显示区域。
在HTML代码中，我们使用了**onclick**事件，这意味着每当用户点击任何按钮时，相应的操作就会在使用javascript的计算器后端执行。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="calc">
<div id="content">
<form>
<div id="output">
<input type="text" id='res'>
</div>
<div class="btn">
<input type="button" value='C' onclick="Clear()" id="clear">
<input type="button" value='←' onclick="Back()" id="backspace">
<input type="button" value='%' onclick="Solve('%')">
<input type="button" value='/' onclick="Solve('/')">
<br>
<input type="button" value='7' onclick="Solve('7')">
<input type="button" value='8' onclick="Solve('8')">
<input type="button" value='9' onclick="Solve('9')">
<input type="button" value='x' onclick="Solve('*')">
<br>
<input type="button" value='4' onclick="Solve('4')">
<input type="button" value='5' onclick="Solve('5')">
<input type="button" value='6' onclick="Solve('6')">
<input type="button" value='-' onclick="Solve('-')">
<br>
<input type="button" value='1' onclick="Solve('1')">
<input type="button" value='2' onclick="Solve('2')">
<input type="button" value='3' onclick="Solve('3')">
<input type="button" value='+' onclick="Solve('+')">
<br>
<input type="button" value='00' onclick="Solve('00')">
<input type="button" value='0' onclick="Solve('0')">
<input type="button" value='.' onclick="Solve('.')">
<input type="button" value='=' onclick="Result()">
</div>
</form>
</div>
</div>
<script src='index.js'></script>
</body>
</html>
CSS代码
这是实现我们计算器的CSS的**style.css**文件，它链接到HTML代码。通过这段CSS代码，我们使用flex将计算器放置在页面中心，为计算器提供了深色主题背景，为“c”和“←”按钮添加了不同的颜色，并调整了显示输入框的大小，并更改了元素的字体大小和填充。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#calc {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#content {
background: #2c302c;
padding: 20px;
border-radius: 10px;
}
#content form input {
border: 0;
outline: 0;
width: 50px;
height: 50px;
border-radius: 8px;
font-size: 15px;
margin: 10px;
cursor: pointer;
}
#backspace {
background-color: rgb(237, 89, 30);
color: white;
}
#res {
padding: 10px;
}
#clear {
background-color: rgb(237, 89, 30);
color: white;
}
form #output {
display: flex;
justify-content: flex-end;
margin: 15px 0;
}
form #output input {
text-align: right;
flex: 1;
font-size: 25px;
}
JavaScript代码
这是实现我们计算器的Javascript的**index.js**文件，它链接到HTML代码。此代码具有主要功能，例如：使用**solve**函数追加值，使用**result**函数计算结果（使用“eval”计算结果），如果算术表达式中存在任何错误，则显示错误消息，使用**clear**函数清除显示，使用**back**函数删除数字，最后，我们使用addEventListener添加了键盘功能。
以下是使用javascript实现上述功能。
function Solve(val) {
var v = document.getElementById('res');
v.value += val;
}
function Result() {
var num1 = document.getElementById('res').value;
try {
var num2 = eval(num1.replace('x', '*'));
document.getElementById('res').value = num2;
} catch {
document.getElementById('res').value = 'Error';
}
}
function Clear() {
var inp = document.getElementById('res');
inp.value = '';
}
function Back() {
var ev = document.getElementById('res');
ev.value = ev.value.slice(0, -1);
}
document.addEventListener('keydown', function (event) {
const key = event.key;
const validKeys = '0123456789+-*/.%';
if (validKeys.includes(key)) {
Solve(key === '*' ? 'x' : key);
} else if (key === 'Enter') {
Result();
} else if (key === 'Backspace') {
Back();
} else if (key.toLowerCase() === 'c') {
Clear();
}
});
68K+ 次浏览
