使用JS+HTML书写一个简易计算器

最新推荐文章于 2024-05-23 20:09:14 发布
最新推荐文章于 2024-05-23 20:09:14 发布
阅读量239 收藏 1
点赞数
文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41300251/article/details/109694937
版权

HTML部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="5"style="background-color: #55ffff;">
			<tr>
				<th colspan="5"><input type="text"id="pingmu" value="0" style="width: 265px;height: 40px;"/></th>
			</tr>
				<td><input type="button"value="C"style="width:50px;height:50px;"οnclick="empty()"/></td>
				<td><input type="button"value="+/-"style="width:50px;height:50px;"οnclick="sign()"/></td>
				<td><input type="button"value="%"style="width:50px;height:50px;"οnclick="operation(this.value)"/></td>
				<td colspan="2"><input type="button"value="&larr;"style="width: 102px;height: 50px;margin-left:3px;"οnclick="returnOne()"/></td>
			</tr>
			<tr>
				<td><input type="button"value="7" style="width: 50px;height: 50px;"οnclick="num(this.value)"/></td>
				<td><input type="button"value="8" style="width: 50px;height: 50px;"οnclick="num(this.value)"/></td>
				<td><input type="button"value="9" style="width: 50px;height: 50px;"οnclick="num(this.value)"/></td>
				<td><input type="button"value="+" style="width: 50px;height: 50px;"οnclick="operation(this.value)"/></td>
				<td><input type="button"value="-" style="width: 50px;height: 50px;"οnclick="operation(this.value)"/></td>
			</tr>
			<tr>
				<td><input type="button"value="4" style="width: 50px;height: 50px;"οnclick="num(this.value)"/></td>
				<td><input type="button"value="5" style="width: 50px;height: 50px;"οnclick="num(this.value)"/></td>
				<td><input type="button"value="6" style="width: 50px;height: 50px;"οnclick="num(this.value)"/></td>
				<td><input type="button"value="*" style="width: 50px;height: 50px;"οnclick="operation(this.value)"/></td>
				<td><input type="button"value="/" style="width: 50px;height: 50px;"οnclick="operation(this.value)"/></td>
			</tr>
			<tr>
				<td><input type="button"value="1" style="width: 50px;height: 50px;"οnclick="num(this.value)"/></td>
				<td><input type="button"value="2" style="width: 50px;height: 50px;"οnclick="num(this.value)"/></td>
				<td><input type="button"value="3" style="width: 50px;height: 50px;"οnclick="num(this.value)"/></td>
				<td><input type="button"value="x²"style="width: 50px;height: 50px;"οnclick="square(this.value)"/></td>
				<td><input type="button"value="√" style="width: 50px;height: 50px;"οnclick="nsqrt()"/></td>
			</tr>
			<tr>
				<td colspan="2"><input type="button"value="0"style="width:102px;height:50px;margin-left:3px;"οnclick="num(this.value)"/></td>
				<td><input type="button"value="."style="width:50px;height:50px;"οnclick="point()"/></td>
				<td colspan="2"><input type="button"value="="style="width:102px;height:50px;margin-left:3px;"οnclick="result()"/></td>
			</tr>
		</table>
		<script type="text/javascript"src="js/计算器.js"></script>
	</body>
</html>

JS部分：

var xianshi="";
var shuzi="";
var huancun="";
//处理数字
function num(a){
	var pingmu=document.getElementById("pingmu");
	xianshi+=a;
	pingmu.value=xianshi;
	shuzi+=a;
}
//基础运算
function operation(b){
	if(shuzi==""&&huancun=="")return;
	huancun+=shuzi+b;
	shuzi="";
	xianshi="";
}
//显示结果
function result(){
	huancun+=shuzi;
	var pingmu=document.getElementById("pingmu");
	huancun=eval(huancun);
	pingmu.value=huancun;
	shuzi="";
	xianshi="";
}
//为数字添加符号
function sign(){
	var pingmu=document.getElementById("pingmu");
	var value =pingmu.value;
	value="(-("+value+"))"
	value=eval(value)
	pingmu.value=value;
	if(shuzi=="")huancun=value;
	else{shuzi=value;}
}
//平方根
function nsqrt(){
	var pingmu=document.getElementById("pingmu");
	var value=pingmu.value;
	value=eval(value);
	value=Math.sqrt(value);
	pingmu.value=value;
	if(shuzi=="")huancun=value;
	else{shuzi=value;}
}
//平方
function square(c){
	var pingmu=document.getElementById("pingmu");
	var value=pingmu.value;
	value=eval(value);
	pingmu.value=value*value;
	if(shuzi=="")huancun=value;
	else{shuzi=value;}
}
//小数点
function point(){
	var pingmu=document.getElementById("pingmu");
	if(shuzi==""||xianshi==""){shuzi="0";xianshi="0"}
	shuzi+=".";
	xianshi+=".";
	pingmu.value=xianshi;
}
//清空
function empty(){
	shuzi="";
	huancun="";
	xianshi="";
	document.getElementById("pingmu").value="";
}
//退一位
function returnOne(){
	shuzi=shuzi.substring(0,shuzi.length-1)
	xianshi=xianshi.substring(0,xianshi.length-1)
	pingmu.value=xianshi;
}

效果如下：
效果图](http://127.0.0.1:8848/lession02/%E8%AE%A1%E7%AE%97%E5%99%A8.html)
效果图

伺悖霂
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用JS和HTML写一个计算器
qq_44743287的博客
11-11 384
使用JS和HTML写一个计算器 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>ES6</title...
如何使用vue做一个简单的计算器
m0_68007258的博客
04-02 470
一个按钮，v-on:click绑定一个点击事件，点击后显示结果；3.最后，页面要有显示数字运算符效果，用{{属性}}实现一个属性的显示，则{{数字1}}{{运算符}}{{数字2}}={{结果}}实现一个四则运算的显示。3.函数实现方法，按钮绑定点击事件equal，函数具体内容就是通过if、 else if判断，判断条件根据运算符的不同，实现不同的运算的运算结果；4.监听器实现方法，监听输入的两个数字，第一个数字先存到结果里面，第二个数字根据运算符的不同，实现不同运算结果的存入；
制作一个简单的计算器JavaScript、html、css
hs1219462412的博客
01-16 1301
* { margin: 0; padding: 0; } tbody button{ width: 40px; height: 40px; border: 0; background: pink; text-align: center; margin-right: 14px; .
1.一个简单的计算器，用JS书写
WDKKING的博客
04-07 541
Document onload = function () { var num1 = document.getElementById ("tx1"); // 声明保存第一个输入框 var num2 = document.getElementById ("tx2"); // 声明保存第二个输入框 var num3 = document.getElementById ("j
简易计算器
qq_34634181的博客
10-16 345
实现一个简易计算器 首先是最简单也是最容易做到的，但不建议使用，将结构的样式糅杂到了一起。+会起到连接符的作业，因此如果不加+号，1+1=11，使用+号可以自动避免。-/*则不用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简...
关于使用js实现简易计算器出现Uncaught SyntaxError:invalid or unexpected的错误
qq_57506334的博客
05-25 463
博主在写js建议计算器时发现onclick失灵 我们可以向输入框中输入数据但在点击运算按钮时发现不显示结果： 博主先是检查函数以及框架是否书写正确，检查无误后，使用开发者工具发现了问题的所在，此种情况下会出现上述报错： 注释之后: 代码正常运行： ...
用最简单快捷的方法用js写一个计算器
蒲小若的博客
08-11 670
在js的全局方法中有一个eval()方法，由于平时不怎么用，所以到关键时候就没想起来它 想写一个简易的计算器，本来以为要不了多久就能写出来的，谁知道愣是花费了我近两个小时的时间来写，但结果还是不能令我满意。想找一个更好的方法来写，不想写的那么麻烦，用什么方法呢？想了一个遍，后来猛然看到屏幕上有一个eval(),当时我的电脑正打开着网页。福星来了，对啊，我浪费了这么长时间写出来的东西还不能令我满意
If语句计算器
VibMike的博客
03-20 1673
1、创建一个存放你加减乘除以及输入内容原始的容器 2、给加减乘除的select加上名字以及类名(我用的id，诸位随意) 3、给你的第一个input指定类型以及加上id名(这个input用来输入最前面一位数) 4、按照意图给你的第二个输入内容框以及输出结果框分别指定类型和命名(我命名一直都很随意) 5、然后给你的计算按钮写好类名，我比较懒，直接把点击事件放在标签里了 6、你打开是这样的，要是你想给它美化一下用css给你的内容改变一下样式就好了，反正我懒得写了 7、js部
vue制作优雅的拟态化微立体计算器
你好呀，很高兴你在看这里~
07-20 1554
一.话不多，先看效果：  这个效果是我在b站看到一个up写的，感觉拟态化微立体效果很简约却又有种优雅的感觉。????而优雅又怎么能缺了我， <(￣︶￣)> ，所以话不多说，自己马上也整了一个，实现并不难，超详细的制作过程如下（最后附上完整代码）： 二.超级详细的制作过程： 1.首先自然是定义html标签（先别理标签里的vue语法），我定义一个父盒子.calculator，然后定义一个span标签放计算结果，其它按钮都用button标签包裹。计算器的布局采用grid布局，所以在每个按钮里绑定属性
基于html+css+js实现简易计算器代码实例
10-15
主要介绍了基于html+css+js实现简易计算器代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
用 js+html 实现一个网页计算器
05-31
使用js + html 实现的简单的网页计算器，可以实现加、减、乘、除复杂运算，二进制、八进制、十六进制转换、sin、cos、tan三角函数运算、acos、atan、asin反三角函数运算、开平方、log、随机数生成、指数运算、四舍五...
用 js+html 实现一个简易版的计算器
07-02
使用js + html 实现的简易版的网页计时器，虽然简洁，但是小巧，它能进行加、减、乘、除运算，并且可以对小数、负数、带括号的三个数以上的式子进行运算，当然回退和归零功能也是必备的，还可以设置主题皮肤，代码...
html+js+css实现简易计算器.rar
05-18
通过这段简单的HTML、CSS和JavaScript代码，我们已经成功创建了一个基本的计算器。当然，这只是一个起点。你可以根据需要添加更多功能，比如支持更多的数学运算，或者改进用户界面。现在，打开你的文本编辑器，开始...
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 939
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
前端基础入门三大核心之HTML篇：深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-23 1080
理解PNG格式的不同变体及其适用场景，是前端开发者必备的基础技能之一。通过合理的选用，不仅能提升网站的视觉效果，还能确保良好的性能体验。在实际工作中，你还遇到过哪些关于图像格式选择的挑战？或是有独到的优化策略？欢迎在评论区分享你的见解和经验，让我们一起探讨前端图像优化的更多可能性。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
【docker】Docker的基本指令和HTML/PYTHON/C++的简单创建示例
朝花夕拾
05-22 1535
本文介绍了 Docker 的基本指令，包括如何创建、运行和管理 Docker 容器。同时，通过 HTML、Python 和 C++ 三种语言分别演示了如何在 Docker 中创建简单的应用程序。读者将了解如何使用 Docker 构建和运行不同语言的应用程序，并掌握 Docker 的基本操作技巧。
前端基础入门三大核心之HTML篇 —— IndexedDB详解
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 1033
IndexedDB是一种运行在浏览器中的非关系型数据库，它允许web应用在用户的设备上存储大量结构化数据，包括文件和 blob 数据类型。与传统的Cookie和localStorage相比，IndexedDB支持复杂的查询、索引以及事务处理，特别适合处理大量或者复杂的数据集。在事件中定义对象仓库和索引。// 创建索引IndexedDB为前端开发者提供了强大的本地数据存储能力，是构建高性能Web应用不可或缺的工具。
HTML静态网页成品作业(HTML+CSS)——动漫海绵宝宝介绍网页(5个页面)
weixin_42283461的博客
05-22 1082
HTML静态网页成品作业(HTML+CSS)——动漫海绵宝宝介绍网页(5个页面)
jsp+serlvet创建一个简易计算器
06-13
好的，这是一个简易的jsp+servlet计算器的实现步骤： 1. 创建一个JSP页面，包含一个表单，其中表单中有两个输入框，一个下拉框和一个提交按钮。下拉框中包含加、减、乘、除四个选项。 2. 在表单中提交按钮的onclick事件中，调用JavaScript函数，将表单中的数据通过Ajax方式发送到后台Servlet中。 3. 创建一个Servlet，用于接收前端发送过来的数据并进行计算，计算完成后将结果返回给前端。 4. 在Servlet中，通过request.getParameter()方法获取前端发送过来的数据，然后根据选择的运算符进行计算，并将结果存储在request作用域中。 5. 在Servlet中，通过request.getRequestDispatcher()方法跳转到结果展示的JSP页面。 6. 在JSP页面中，通过EL表达式获取Servlet中计算得到的结果，并将结果展示给用户。 7. 完成以上步骤后，即可实现一个简单的jsp+servlet计算器。 这里是一个简单的示例代码： index.jsp： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简易计算器</title> <script type="text/javascript"> function calculate() { var num1 = document.getElementById("num1").value; var num2 = document.getElementById("num2").value; var operator = document.getElementById("operator").value; if (num1 == "" || num2 == "") { alert("请输入数字！"); return false; } var url = "calculate?num1=" + num1 + "&num2=" + num2 + "&operator=" + operator; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("result").innerHTML = xhr.responseText; } } xhr.open("GET", url, true); xhr.send(); } </script> </head> <body> <h1>简易计算器</h1> <form> <input type="text" id="num1" name="num1"> <select id="operator" name="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" id="num2" name="num2"> <input type="button" value="计算" onclick="calculate()"> </form> <div id="result"></div> </body> </html> ``` CalculateServlet.java： ```java import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class CalculateServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { int num1 = Integer.parseInt(request.getParameter("num1")); int num2 = Integer.parseInt(request.getParameter("num2")); String operator = request.getParameter("operator"); int result = 0; switch (operator) { case "+": result = num1 + num2; break; case "-": result = num1 - num2; break; case "*": result = num1 * num2; break; case "/": result = num1 / num2; break; } request.setAttribute("result", result); request.getRequestDispatcher("result.jsp").forward(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } } ``` result.jsp： ```html <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算结果</title> </head> <body> <h1>计算结果</h1> <p><%= request.getAttribute("result") %></p> </body> </html> ``` 希望这个示例代码能够帮到你！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值