HTML实现简单计算器

最新推荐文章于 2023-11-21 15:20:56 发布
最新推荐文章于 2023-11-21 15:20:56 发布
阅读量1.8w 收藏 64
点赞数 17
文章标签： js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qian_Qian_IT/article/details/105102744
版权

简单计算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简易计算器</title>
		<style type="text/css">
			*{
				margin: auto;
				padding: 0px;
				text-align: center;
				font-family: "微软雅黑";
			}
			.content{
				border-radius: 10%;
				width: 400px;
				height: 550px;
				background-color: antiquewhite;
			}
			.clear{
				border-radius: 50%;
				width: 20%;
				height: 72px;
				background-color: #FF4500;
			}
			#result{
				margin-top: 24px;
				font-size: 16px;
				width: 60%;
				height: 72px;
				text-align: left;
				border-radius: 20px;
				background-color: #FFE4C4;
			}
			.symbol{
				margin-top: 36px;
				font-size: xx-large;
				border-radius: 50%;
				width: 20%;
				height: 72px;
				background-color:bisque;
			}
			.number{
				margin-top: 36px;
				font-size: xx-large;
				border-radius: 50%;
				width: 20%;
				height: 72px;
				background-color:beige;
			}
			.calculate{
				margin-top: 36px;
				font-size: xx-large;
				border-radius: 50%;
				width: 20%;
				height: 72px;
				background-color: #FF4500;
			}
			.content input:hover{
				box-shadow: 5px 5px 5px #888888;
			}
			.content input:active{
				background-color: #FF0000;
			}
		</style>
		<script type="text/javascript">
			function clearValue(){
				document.getElementById("result").value="";
			}
			function get(value){
				document.getElementById("result").value+=value;
			}
			function calculate(){
				var result=0;
				result=document.getElementById("result").value;
				document.getElementById("result").value="";
				document.getElementById("result").value=eval(result);
			};
		</script>
	</head>
	<body>
		<div class="banner">
			<h2>
				简 易 计 算 器
			</h2>
		</div>
			<br />
		<div class="content">
			<input type="button" value="清 除" class="clear" onclick="clearValue()"/>
			<input type="text" id="result" readonly="readonly" placeholder="运 算 结 果 显 示"/>
				<br />
			<input type="button" value="1" class="number" onclick="get(this.value)"/>
			<input type="button" value="2" class="number" onclick="get(this.value)"/>
			<input type="button" value="3" class="number" onclick="get(this.value)"/>
			<input type="button" value="+" class="symbol" onclick="get(this.value)"/>
				<br />
			<input type="button" value="4" class="number" onclick="get(this.value)"/>
			<input type="button" value="5" class="number" onclick="get(this.value)"/>
			<input type="button" value="6" class="number" onclick="get(this.value)"/>
			<input type="button" value="-" class="symbol" onclick="get(this.value)"/>
				<br />
			<input type="button" value="7" class="number" onclick="get(this.value)"/>
			<input type="button" value="8" class="number" onclick="get(this.value)"/>
			<input type="button" value="9" class="number" onclick="get(this.value)"/>
			<input type="button" value="*" class="symbol" onclick="get(this.value)"/>
				<br />
			<input type="button" value="0" class="number" onclick="get(this.value)"/>
			<input type="button" value="." class="symbol" onclick="get(this.value)"/>
			<input type="button" value="/" class="symbol" onclick="get(this.value)"/>
			<input type="button" value="=" class="calculate" onclick="calculate()"/>
		</div>
			<br />
		<div class="footer">
			<p align="center">CopyRight &copy; QianQian</p>
		</div>
	</body>
</html>

运行结果：

在这里插入图片描述

Qian_Qian_IT
关注
  • 17
    点赞
  • 踩
  • 64
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论
JavaScript简单计算器
⁣  ⁡⁣⁣
10-20 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> </head> <body> <!--页面布局--> <input type="text" id="num1" placeholder="请输入第一个数字"/> <input type="text" id.
【HTML】简易计算器
Sunny的博客
03-05 5365
设计一个简易计算器，在“操作数”标签右侧的两个文本框中输入操作数，当单击“+，-，*，/”按钮时，对两个操作数进行运算并将结果填入到“结果”标签右侧的文本框中。
HTML实现简单计算器附详细思路
09-28
大概思路就是将按键内容以字符串形式存储在文字框中当按钮为“=”时，调用eval方法计算结果然后将结果输出文字框中,需要的朋友可以参考下
html实现计算器源码
最新发布
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
11-21 1926
html实现计算器源码，计算器源码，简易计算器功能实现，加减乘除，平方，根号等基本算数功能实现，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
简易版html计算器
08-25
文本文档编写，改后缀直接运行，html前端开发实例，网页版简易计算器，内容附带注释，总之很方便就对了
HTML简易计算器
11-26
网页版的简易计算器
HTML简单计算器
一加一等于十的博客
10-17 468
简单计算器
HTML简单计算器实现
qq_43558459的博客
07-02 4490
这款计算器的主要功能有加减乘除，平方开方，清零，回退，连续加减乘除等功能。 成品图如下： 功能模块图如下： 整体用一个table标签创建一个五行六列的表格，这里上HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1
HTML制作一个简易计算器小应用
djz917的博客
06-12 3万+
先展示UI界面先进行逻辑分析1.界面外层长250px，宽600px用来显示计算器主界面分上下结构  上：用来显示数字  1.显示结果                              2.显示输入数字                        下：用来显示按钮  ul li button            依次为  AC  +/-  %  /                    ...
html+js实现简易计算器功能
04-22
简易计算器，利用html+js实现，通过浏览器客户端进行编译实现，弹出窗口，进行选择计算。
html+js简易计算器
11-01
html+javaScript实现简易计算器。。。。。。。。。。。
简易计算器html源代码
05-29
是一个含javascript的简易计算器。
html 计算器实现
12-05
基于HTML实现的简易计算器 实现加减乘除操作 与美化功能
html计算器
10-27
html网页版计算器calc，纯JavaScript编写，双击即可运行，不需其他环境。页面较为美观，模仿电脑自带calc，具有仿九宫格类似的样式。
基于html+css+js实现简易计算器代码实例
10-15
【基于HTML+CSS+JS实现简易计算器代码实例详解】 在Web开发中，创建一个简易计算器是一种常见的实践，有助于初学者理解和掌握HTML、CSS以及JavaScript的基本用法。本篇将详细介绍如何利用这三种技术来实现一个功能...
html+js实现的简单计算器(加减乘除)
热门推荐
静湖微风
04-13 6万+
function setOp(op, opTips) { var tb=document.getElementById("tb_calc"); tb.style.display = "none"; document.getElementById("x").value = ""; do
html计算器_简易计算器
weixin_39731782的博客
12-01 141
JavaScript和jQuery也是第一次接触到，对于它的应用还有操作还有很多不是很理解的东西，所以js部分的代码不是很简洁，日后还是需要一定的学习来熟悉。对于网页的大致框架布局我是没有太大问题，整个计算器的bug点在于jQuery。按照老师在简易计算器的课程中的用法应该用到$('table').find('td').click(function(){})点击单元格内的内容，获取它放入相应的位置...
简单计算器
MeiLi_chenai的博客
12-17 428
var numresult; var str; //用于输入的方法 function shuru(nums){ str = document.getElementById("disPlay"); str.value = str.value + nums; } //清空界面 function qingKong(){ do
javascript实现简易计算器
05-14
以下是一个简单的 JavaScript 计算器： ```html <!DOCTYPE html> <html> <head> <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; var result = 0; if (operator === '+') { result = Number(num1) + Number(num2); } else if (operator === '-') { result = num1 - num2; } else if (operator === '*') { result = num1 * num2; } else if (operator === '/') { result = num1 / num2; } document.getElementById('result').innerHTML = result; } </script> </head> <body> <h3>简易计算器</h3> <input type="number" id="num1" placeholder="请输入数字"> <select id="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="number" id="num2" placeholder="请输入数字"> <button onclick="calculate()">计算</button> <p id="result"></p> </body> </html> ``` 这个计算器包含了两个数字输入框、一个下拉列表框（用于选择运算符）以及一个按钮，当用户点击“计算”按钮时，JavaScript 函数 `calculate()` 会被调用来计算结果，并将结果输出到一个段落元素中。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Qian_Qian_IT

感谢您的赏识，我将持续创作~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值