使用 HTML、CSS 和 JavaScript 的实时计算器
在本文中,我们将讨论如何使用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 事件;这意味着每当用户单击任何按钮时,都会在计算器的后端执行相应的操作。
<!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的内容,例如放置内容颜色,宽度,高度,字体大小,填充,边距等。
*{ 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 代码 -
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);}
这是完整的代码
<!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>更新于:13天前
相关文章
- 全栈工程师看过来!PHP Javascript语法对照、速查
- HTML转义字符对照表
- Javascript事件与功能说明大全
- Javascript脚本运算符执行顺序对照表
- 如何使用JavaScript从字符串中删除HTML标签?
- enctype='multipart/form-data'在HTML中是什么意思?
- 如何在 JavaScript 中使用正则表达式删除 HTML 标签?
- CSS 中的变量
- CSS overflow 内容溢出时的显示方式
- CSS font-family 属性设置字体
- CSS 控制内容显示行数
- 玩转 CSS Flexbox 弹性布局
- 使用VSCode开发.NET MVC常用插件
- CSS实现文字环绕图片和文字两端对齐
- JS判断是否在微信浏览器打开
- JavaScript设计模式学习网站Patterns
- 跨年代码 烟花html
- 一些简单html实例集合
- 解释 JavaScript 中计时器的工作原理
- 表白代码,爱心树html