当前位置:首页 > 编程技术 > 正文内容

使用 HTML、CSS 和 JavaScript 的实时计算器

yc8881年前 (2022-12-01)编程技术256

在本文中,我们将讨论如何使用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>

本站发布的内容若侵犯到您的权益,请邮件联系站长删除,我们将及时处理!


从您进入本站开始,已表示您已同意接受本站【免责声明】中的一切条款!


本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行研究。


本站资源仅供学习和交流使用,版权归原作者所有,请勿商业运营、违法使用和传播!请在下载后24小时之内自觉删除。


若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。


本文链接:https://www.10zhan.com/biancheng/10144.html

分享给朋友:

“使用 HTML、CSS 和 JavaScript 的实时计算器” 的相关文章

【说站】laravel实现自定义404页面并给页面传值

【说站】laravel实现自定义404页面并给页面传值

以 laravel5.8 为例,虽然有自带的404页面,但太简单,我们更希望能自定义404页面,将用户留在站点。实现的方式很简单,将自定义的视图文件命名为 404.blade.php,并放到 reso...

【说站】Thymeleaf报错Error resolving template “XXX”

【说站】Thymeleaf报错Error resolving template “XXX”

修改了一下开源项目的目录结构访问突然报错Error resolving template “XXX”可能原因有如下三种:第一种可能:原因:在使用springboot的过程中,如果使用thymeleaf...

【说站】利用Webhook实现Java项目自动化部署

【说站】利用Webhook实现Java项目自动化部署

用webhook就能实现Java项目自动部署,其实原理很简单。费话不多说,直接往下看教程。1. 创建gitee仓库并初始化2. 在linux安装git3. 在宝塔的软件的商店里下载Webhook4....

【说站】vagrant实现linux虚拟机的安装并配置网络

【说站】vagrant实现linux虚拟机的安装并配置网络

一、VirtualBox的下载和安装1、下载VirtualBox官网下载:https://www.virtualbox.org/wiki/Downloads我的电脑是Windows的,所以下载Wind...

【说站】使用systemctl配置dnspod-shell实现ddns

【说站】使用systemctl配置dnspod-shell实现ddns

这个是毛子路由器上用的脚本,由于碳云的nat服务器公网IP不断的变,因此只好通过ddns来稳定连接nat服务器了。顺便水一篇文章,大家新年快乐。使用前需要将域名添加到 DNSPod 中,并添加一条A记...

【说站】Python获取最新疫情数据实现动态地图实时展示各地情况

【说站】Python获取最新疫情数据实现动态地图实时展示各地情况

疫情降临转眼已经第三年了,时间过得真快,愿疫情早点结束,世界不再多灾多难。最近疫情稍微好转一些了,所以咱们获取一下最新的疫情数据,做个可视化地图看看。效果展示获取到的数据咱们保存到表格可视化地图颜色是...