在本文中，我们将讨论如何使用HTML，CSS和JavaScript开发实时计算器。通常，如果我们观察任何实时计算器，我们知道它有 -
- 数字网格（0-9 和 00）。
- 一些基本的非主题运算符（ ，-，/，x，%）。
- 以及一些用于特殊操作的符号，例如（清除、退格、等于）
我们所需程序的输出如下所示 -
但是，为此，我们需要一个 UI 和逻辑编程来处理操作;其中 UI 是用户在其中与应用程序或网站交互的用户界面。在这种情况下，通过接口，我们指的是输出中显示的内容。它们可以包括显示屏、按钮、输入字段等。
使用网页
在这个程序中，我们使用 HTML 为计算器 UI 创建内容;这意味着我们正在创建框、输入字段、按钮等。
使用CSS
我们使用CSS来管理HTML的内容，如内容颜色，宽度，高度，字体大小，填充，边距等。
JavaScript 的使用
在计算器中，确定有不同的按钮，所有这些按钮都有不同的功能。例如， 按钮执行加法运算，– 执行减法运算，可以使用 JavaScript 将这些操作分配给这些按钮。
开发实时计算器
以下是分别以 HTML、CSS 和 JavaScript 格式的文件来开发实时计算器 -
计算器.html
这是我们下面计算器的 HTML 文件。在这里，我们使用 HTML 脚本来创建计算器 UI 的内容。我们包括计算器的按钮、输入字段等。
在 HTML 代码中，我们还使用了 onclick 事件;这意味着每当用户单击任何按钮时，都会在计算器的后端执行相应的操作。
代码语言：javascript复制<!DOCTYPE html><html lang="en"><head>
<link rel="stylesheet" href="Calc.css">
<title>Calulator</title></head><body>
<div class="main">
<input type="text" id = 'res'>
<div class="btn">
<input type="button" value = 'C' onclick = "Clear()">
<input type="button" value = '%' onclick = "Solve('%')">
<input type="button" value = '←' onclick ="Back('←')">
<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>
</div>
<script src = 'Calc.js' ></script></body></html>以下是我们计算器的 CSS 文件;我们使用CSS来管理HTML的内容，例如放置内容颜色，宽度，高度，字体大小，填充，边距等。
代码语言：javascript复制*{
padding: 0;
margin: 0;
font-family: 'poppins', sans-serif;}body{
background-color: #495250;
display: grid;
height: 100vh;
place-items: center;}.main{
width: 400px;
height: 450px;
background-color: white;
position: absolute;
border: 5px solid black;
border-radius: 6px; }.main input[type='text'] {
width: 88%;
position: relative;
height: 80px;
top: 5px;
text-align: right;
padding: 3px 6px;
outline: none;
font-size: 40px;
border: 5px solid black;
display: flex;
margin: auto;
border-radius: 6px;
color: black;}.btn input[type='button']{
width:90px;
padding: 2px;
margin: 2px 0px;
position: relative;
left: 13px;
top: 20px;
height: 60px;
cursor: pointer;
font-size: 18px;
transition: 0.5s;
background-color: #495250;
border-radius: 6px;
color: white;}.btn input[type='button']:hover{
background-color: black;
color: white;}计算器.js
该程序中的JavaScript文件负责执行计算器的每个操作，如算术运算，清除输入字段，退格，显示输出等。
以下是开发计算器操作的 JavaScript 代码 -
代码语言：javascript复制function Solve(val) {
var v = document.getElementById('res');
v.value = val;}function Result() {
var num1 = document.getElementById('res').value;
var num2 = eval(num1);
document.getElementById('res').value = num2;}function Clear() {
var inp = document.getElementById('res');
inp.value = '';}function Back() {
var ev = document.getElementById('res');
ev.value = ev.value.slice(0,-1);}这是完整的代码
代码语言：javascript复制<!DOCTYPE html><html lang="en"><head>
<style>
*{
padding: 0;
margin: 0;
font-family: 'poppins', sans-serif;
}
body{
background-color: #495250;
display: grid;
height: 100vh;
place-items: center;
}
.main{
width: 400px;
height: 450px;
background-color: white;
position: absolute;
border: 5px solid black;
border-radius: 6px;
}
.main input[type='text'] {
width: 88%;
position: relative;
height: 80px;
top: 5px;
text-align: right;
padding: 3px 6px;
outline: none;
font-size: 40px;
border: 5px solid black;
display: flex;
margin: auto;
border-radius: 6px;
color: black;
}
.btn input[type='button']{
width:90px;
padding: 2px;
margin: 2px 0px;
position: relative;
left: 13px;
top: 20px;
height: 60px;
cursor: pointer;
font-size: 18px;
transition: 0.5s;
background-color: #495250;
border-radius: 6px;
color: white;
}
.btn input[type='button']:hover{
background-color: black;
color: white;
}
</style>
<script>
function Solve(val) {
var v = document.getElementById('res');
v.value = val;
}
function Result() {
var num1 = document.getElementById('res').value;
var num2 = eval(num1);
document.getElementById('res').value = num2;
}
function Clear() {
var inp = document.getElementById('res');
inp.value = '';
}
function Back() {
var ev = document.getElementById('res');
ev.value = ev.value.slice(0,-1);
}
</script>
<title>Calulator</title></head><body>
<div class="main">
<input type="text" id = 'res'>
<div class="btn">
<input type="button" value = 'C' onclick = "Clear()">
<input type="button" value = '%' onclick = "Solve('%')">
<input type="button" value = '←' onclick ="Back('←')">
<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>
</div>
<script src = 'Calc.js' ></script></body></html>
