js css html实现计算器

最新推荐文章于 2024-01-28 22:53:06 发布
最新推荐文章于 2024-01-28 22:53:06 发布
阅读量441 收藏 7
点赞数 1
分类专栏： js实现计算器 文章标签： javascript css html visual studio code
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lowser1/article/details/122141195
版权

首先先架构出html需要使用的按钮与输入框

 

 然后给按钮与输入框添加样式

效果是这样的,可以自己编写想要的效果:

 

 然后我们给每个button添加一个事件

我们要在输入框里获取到数字的值,就要先获取到input输入框 所以我们现在在script里先选择获取到input输入框,这里我给input取了一个class类名加ipt

这样我们就获取到了input输入框,之前我们给每个button添加了取名为add的事件,现在我们给add事件添加一个函数,让数字可以输入到input输入框里

这里的a是一个形参,目的是把上面按钮的add()括号里的实参传递过来,u1l

上面公式的意思是 输入框的默认值=输入框的默认值+你传过来的参数;也就是你传过来的参数就上输入进了输入框,

接下来我们再给'='的事件添加一个函数,让他可以计算输入框的值

 这里公式的意思是 输入框里的默认值=自动计算输入框里的默认值

eval()的意思是可以自动计算括号里的值,就可以让计算机算出来我们想要的值啦

然后我们还要一个清零键AC,他的目的是清零输入框里的值,所以我们也给他的事件添加一个函数

这里公式的意思是当我们点击到AC键时 输入框的值='';  ''就是空了 啥都没有了,所以我们就达到了清零的效果 

下面是实现简易计算器的全部代码

css样式:

 html内容:

 js代码:

 需要注意我们的乘号是不能被识别的 所以事件里你传的值应该是*号,

以上就是简易计算机的实现过程

 

 

lowser1
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简易计算器设计
m0_58822223的博客
06-07 808
一、简易计算器设计主要包含三个input输入框，两个button按钮，以及一个下拉选择框。 目标效果如下： 二、以下为解析
css如何动态计算,CSS中的动态计算
weixin_39610366的博客
08-04 3715
自从CSS的calc()函数得到浏览器的支持起，在CSS中就可以做一些简单的数学运算。如果你阅读过 图解CSS系列 中的 《CSS函数》一文的话，你会发现现在或将来有更多的函数可以直接帮助我们在CSS做一些计算，比如颜色计算、三角函数的计算等。尤其是CSS的min()、max()、clamp()以及CSS Grid布局模块中的minmax()出现之后，网页布局带来了革命性的变化。除此之外，在一些特...
纯 HTML+CSS+JavaScript 的计算器
01-21
需求：制作web版计算器，要求实现+-*%和平方，开方。 2.0版：修复归零的问题 3.0版：支持正负数； 4.0版：修复多个多个运算符号导致不能计算的bug; 5.0版： 多个小数点的bug， 自然数e的问题， 0.1，0.2，0.04等小数在使用Math.pow(value, 几次幂) 函数开2次幂，3次幂时的问题 这个版本只能进行7位数以下的开方和次幂，18位数的结果显示 测试：小数点bug依旧存在问题，进行修改布尔类型改为int类型 7.0版 解决0.1，0.2，0.04 等数字计算结果的问题可以输入0.1*0.1打断点查看处理fang'f
制作简单的计算器，用到HTML5中的type=number这个input属性
csdncsdn9876的博客
06-20 3551
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="number" id="num1"/> <select id="slc"> <option value="+">+</option> <option val
【HTML】简易计算器
Sunny的博客
03-05 5335
设计一个简易计算器，在“操作数”标签右侧的两个文本框中输入操作数，当单击“+，-，*，/”按钮时，对两个操作数进行运算并将结果填入到“结果”标签右侧的文本框中。
计算器（html+css+js）
weixin_41850612的博客
12-23 1473
计算器 先上个效果图 : （是不是有点眼熟？没错就是win10上的计算器） 原版的： 我的： 可以看出，还是有不少区别的，不仅仅是样式上，还有功能上。 （实在是懒得调了，功能的话有点小复杂就少些了几个…） 这里先贴个html的格式和css的样式 html: <!DOCTYPE html> <!-- 此处省略一部分标签 --> <body> <div class="body"> <!-- 计算器的头部 -->
html + css + js 实现计算器
11-23
本项目“html + css + js 实现计算器”就是将这三者结合起来，创建一个功能完备的在线计算器。 首先，让我们详细了解一下HTML部分。HTML文档通常由一系列的元素构成，这些元素通过标签来定义。在这个计算器项目中，...
基于html+css+js实现简易计算器代码实例
10-15
【基于HTML+CSS+JS实现简易计算器代码实例详解】 在Web开发中，创建一个简易计算器是一种常见的实践，有助于初学者理解和掌握HTML、CSS以及JavaScript的基本用法。本篇将详细介绍如何利用这三种技术来实现一个功能...
html+js+css实现简易计算器.rar
最新发布
05-18
通过这段简单的HTML、CSS和JavaScript代码，我们已经成功创建了一个基本的计算器。当然，这只是一个起点。你可以根据需要添加更多功能，比如支持更多的数学运算，或者改进用户界面。现在，打开你的文本编辑器，开始...
结合 HTML、CSS，基于原生 JavaScript 实现计算器
01-06
结合 HTML、CSS，基于原生 JavaScript 实现计算器 要求界面、按键设计合理、 美观，除基本计算功能外，需实现进制转换、结果存储、取存计算的功能。实现长度转换。实现时间计算
HTML+CSS+JS制作一个简单的计算器
09-19
HTML+CSS+JS制作一个简单的计算器。该计算器的计算规则类似于我们生活中用的大计算器，暂时未发现有计算错误的问题，有问题请联系我，谢谢。
html+js简易计算器
11-01
html+javaScript实现简易计算器。。。。。。。。。。。
html简易计算器源码
07-11
html实现的一个简易计算器,使用了js、css，可用作学习之用。
简易版html计算器
08-25
文本文档编写，改后缀直接运行，html前端开发实例，网页版简易计算器，内容附带注释，总之很方便就对了
使用html+css+js实现计算器
qq_36190858的博客
07-04 852
使用html+css+js实现计算器  使用html+css+js实现计算器，开启你的计算之旅吧   效果图：     代码如下，复制即可使用： &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;    &lt;head&gt; &lt;meta charset="utf-8"&gt; ...
用HTML实现简易版计算器
热门推荐
lkllkl123123的博客
08-13 1万+
计算器功能：实现了加减乘除、清零、回退、四则运算等等 HTML部分：用表格添加按键，用div块显示内容 CSS部分：将显示的内容定位到div块右下角 JavaScript部分：通过innerTHML属性添加 / 获取所需计算的内容，再调用eval方法将获取到的内容转换为js代码进行计算........................
js+HTML+CSS实现计算器
wenhuabuzhijian的博客
09-07 239
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录html+cssjs html+css <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #all { width: 400px; height: 650px; bord
快速使用HTML、CSS、JavaScript编写一个简单计算器
bjjgff的博客
01-28 2577
首先在根目录下创建一个名为 css的目录， 在css目录下创建 main.css样式文件。在index.html 文件的 head标签中，我们要引入css样式，编写以下标签。我们在项目目录当中创建一个 名为 index.html的文件，在文件中编写以下内容。首先创建一个名为 js的目录，在js目录下创建calculartor.js文件。因为HTML结构是比较单一化的，我们需要使用CSS样式对它进行美化。在index.html文件中的 body标签下，编写以下内容。三、编写JavaScript逻辑代码。
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2020
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
html+js+css计算器
06-08
好的，我可以为您提供一个简单的HTML、JS和CSS实现的计算器。以下是完整的代码： HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="calculator"> <div class="display"> <p id="result">0</p> </div> <div class="buttons"> <button onclick="clearDisplay()">C</button> <button onclick="deleteDigit()">DEL</button> <button onclick="addToDisplay('/')">÷</button> <button onclick="addToDisplay('*')">x</button> <button onclick="addToDisplay('7')">7</button> <button onclick="addToDisplay('8')">8</button> <button onclick="addToDisplay('9')">9</button> <button onclick="addToDisplay('-')">-</button> <button onclick="addToDisplay('4')">4</button> <button onclick="addToDisplay('5')">5</button> <button onclick="addToDisplay('6')">6</button> <button onclick="addToDisplay('+')">+</button> <button onclick="addToDisplay('1')">1</button> <button onclick="addToDisplay('2')">2</button> <button onclick="addToDisplay('3')">3</button> <button class="equals" onclick="calculate()">=</button> <button onclick="addToDisplay('0')">0</button> <button onclick="addToDisplay('.')">.</button> </div> </div> <script src="script.js"></script> </body> </html> ``` CSS代码： ```css body { background-color: #f5f5f5; font-family: 'Lato', sans-serif; } .calculator { margin: 50px auto; width: 300px; background-color: #e8e8e8; border-radius: 10px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .display { padding: 10px; background-color: #fff; border-radius: 10px 10px 0 0; text-align: right; } .display p { font-size: 24px; margin: 0; padding: 0; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; padding: 10px; } button { font-size: 24px; padding: 10px; border-radius: 5px; background-color: #fff; border: none; cursor: pointer; } .equals { background-color: #FFD700; } ``` JS代码： ```js let display = document.getElementById('result'); let expression = ''; function addToDisplay(value) { expression += value; display.innerHTML = expression; } function clearDisplay() { expression = ''; display.innerHTML = '0'; } function deleteDigit() { expression = expression.slice(0, -1); display.innerHTML = expression; } function calculate() { let result = eval(expression); expression = result.toString(); display.innerHTML = result; } ``` 这个计算器可以进行基本的加、减、乘、除操作，同时还具备清空、删除和计算等功能。您可以在浏览器中打开HTML文件，即可使用这个计算器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值