html计算器

于 2024-01-05 17:51:43 发布
阅读量338 收藏 6
点赞数 6
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2203_75956281/article/details/135415162
版权 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
	      *{,margin: 0;padding: 0;}
	      
		.center{width: 600px;height: 600px;background-color: #fff;border-radius:50% ;margin: auto;}
		.center h1{font: #495678,30px;margin-top: 20px;padding-top: 50px;
			            display: block;text-align: center;text-decoration: none;}
		.biao{width: 280px;background-color: #495678;box-shadow: 4px 4px #3d4a65;
			       margin: 40px auto;padding: 40px 0 30px 40px;}
		.btn{outline: none;cursor: pointer;font-size: 20px;width: 45px;height: 45px;
		      margin: 5px 0 5px 10px;}
		 .number{background-color: #72778b;box-shadow: 0 5px #5f6680;font: #dededc;border-radius: 50%;border: 0px;}
		 .operator{background-color: #dededc;box-shadow: 0 5px #bebebe ;font: #72778b;border-radius: 50%;border: 0px;}
		 .other{background-color: #e3844c;box-shadow: 0 5px #e76a3d ;font:#deded;border-radius: 50%;border: 0px;}
		btn:first-child{margin: 5px 0 5px 10px;} 
		.biao{border-radius: 10%;border: 25px;}
		.text{background-color: #98d1dc;box-shadow: inset 6px 6px 0px #3facc0;
		    font: #dededc;font-size: 20px;height: 47px;width: 165px;
		      text-align: right;padding-right: 10px;margin-left: 10px;}
		</style>
	</head>
	<body>
		<script>
			function getValue(x){
				document.getElementById("display").value+=x
			}
			function cls(){
				document.getElementById("display").value="";
			}
			function calc(){
				var res=document.getElementById("display").value;
				document.getElementById("display").value="";
				document.getElementById("display").value=eval(res);
			}
		</script>
		<div class="center">
			<h1>HTML+CSS+JS计算器的实现</h1>
			<form class="biao">
					<input type="button" value="C"  id="clear"  class="btn other" onclick="cls()"/>
				     <input type="text"  id="display"  class="text"/>
				     <br />
				     
				     <input type="button"  value="7" class="btn number" onclick="getValue(this.value)"/>
				     <input type="button"  value="8" class="btn number" onclick="getValue(this.value)"/>
				     <input type="button"  value="9" class="btn number" onclick="getValue(this.value)"/>
				     <input type="button"  value="+" class="btn operator" onclick="getValue(this.value)"/>
				     <br />
				     
					<input type="button"  value="4" class="btn number" onclick="getValue(this.value)"/>
				     <input type="button"  value="5" class="btn number" onclick="getValue(this.value)"/>
				     <input type="button"  value="6" class="btn number" onclick="getValue(this.value)"/>
				     <input type="button"  value="*" class="btn operator" onclick="getValue(this.value)"/>
				     <br />
			
					<input type="button"  value="1" class="btn number" onclick="getValue(this.value)"/>
				     <input type="button"  value="2" class="btn number" onclick="getValue(this.value)"/>
				     <input type="button"  value="3" class="btn number" onclick="getValue(this.value)"/>
				     <input type="button"  value="-" class="btn operator" onclick="getValue(this.value)"/>
				     <br />
				     
				   	 <input type="button"  value="0" class="btn number" onclick="getValue(this.value)"/>
				     <input type="button"  value="." class="btn operator" onclick="getValue(this.value)"/>
				     <input type="button"  value="/" class="btn operator" onclick="getValue(this.value)"/>
				     <input type="button"  value="=" class="btn other" onclick="calc()"/>
				</div>
			</form>
		</div>
	</body>
</html>

小寄.
关注
HTML编写的计算器
爱吃蘑菇的小男孩
07-21 1万+
第一种：简易计算器代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>简易计算器</title> </head> <style> table { ...
HTML实现计算器
m0_62727420的博客
07-03 1万+
HTML实现计算器
用HTML实现简易版计算器
lkllkl123123的博客
08-13 1万+
计算器功能：实现了加减乘除、清零、回退、四则运算等等 HTML部分：用表格添加按键，用div块显示内容 CSS部分：将显示的内容定位到div块右下角 JavaScript部分：通过innerTHML属性添加 / 获取所需计算的内容，再调用eval方法将获取到的内容转换为js代码进行计算........................
利用JavaScript在html页面做一个计算器
qq_33655643的博客
03-31 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、html组成二、html和css,js基础知识***1.html******2.css****3.javascript*代码一些细节未解决的bug 前言 提示：这里可以添加本文要记录的大概内容： 提示：以下是本篇文章正文内容，下面案例可供参考 一、html组成 我们所要做的计算器可由两种方式构成 1.可以用table标签和tr，th，td标签构成，然后用css对他们的属性进行操作得到计算器. 2.可以用div容器实现，.
HTML5实现简易计算器
alsamsung的专栏
02-25 8739
HTML5实现简易计算器 - 一个农名工 - CSDN博客 https://blog.csdn.net/weixin_43954509/article/details/84956432 闲来无聊，用H5写了一个简易版计算器，只是简单地一元运算，功能不多说，直接上代码，注释很详细；(ノ￣▽￣) &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt;   &lt...
HTML计算器
07-19
HTML计算器是一种基于网页的简单计算工具，它利用HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript（一种脚本语言）技术来构建。这个项目中的压缩包可能包含了以下文件：`calculator.html`（HTML文件）、`...
HTML计算器_html记算器_html计算器_
10-03
HTML计算器是一种基于网页的简单计算工具，它利用HTML、CSS和JavaScript这三种核心技术来构建。HTML（HyperText Markup Language）负责页面的结构，CSS（Cascading Style Sheets）用于美化和布局，而JavaScript则...
HTML制作一个简易计算器小应用
热门推荐
djz917的博客
06-12 3万+
先展示UI界面先进行逻辑分析1.界面外层长250px，宽600px用来显示计算器主界面分上下结构  上：用来显示数字  1.显示结果                              2.显示输入数字                        下：用来显示按钮  ul li button            依次为  AC  +/-  %  /                    ...
用HTML制作计算器
Purple_night_的博客
09-29 1027
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input id="num1" type="text" size="4"/> + <input id="num2" type="text" size="4"/> = <span .
html实现科学计算器
qq_44758926的博客
06-20 3849
做计算器的时候是为了交作业，也参考了一些大佬的作品，交了作业很久才来整理博客，也不太记得具体参考了那一位大佬的，如有冒犯，请联系本人删除。
HTML学习：计算器-最终版
老侯的博客
11-09 783
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;计算器-最终形态&lt;/title&gt; &lt;style&gt; .outside{ width: 400px; height: 425px; ba
HTML实现简单计算器
Qian_Qian_IT的博客
03-25 1万+
简单计算器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简易计算器</title> <style type="text/css"> *{ margin: auto; padding: 0px; t...
HTML版计算器
菜鸟的成长之路
05-28 2万+
&amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;title&amp;amp;gt;calculate&amp;amp;lt;/title&amp;amp;gt; &amp;amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;amp;gt; .
HTML制作计算器（一）
baidu_27670713的博客
07-30 3291
计算器的按键布局简单，功能的实现需要JavaScript脚本，作为熟悉HTML编程的上手项目还是不错的。本项目目标是做出漂亮的界面，实现加减乘除功能，有一个输入框，一个结果输出框。利用HTML将页面元素拼凑如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title> </head> <body>
HTML制作计算器（四）
baidu_27670713的博客
08-14 1542
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习。 由此可见，在互联网领域，尤其是做前端，JavaScript是一门极为重要的语言。它被嵌入HTML页面后，可以用来规定网页的行为。 在HT
使用HTML、CSS以及JavaScript 编写一个简单计算器
Judy
03-25 1万+
学完HTML、CSS、JS后有一个小的程序需要DIY，讲真，刚开始知道是计算器的时候还觉得很简单吧其实没想到自己真正动手做，还是会有好多细节。目标：做出像手机上面的简单计算器一样！！！实现基本加减乘除，取相反数，退格，清零思路：一、界面的搭建：在这里，我构建了两个DIV，小的div用来控制将来计算器显示屏，大的div用的放置按键。&lt;body&gt; &lt;div id="q"&gt;&lt...
用html基础知识编辑简易计算器
15届HP-EPM测试4_王叔彬
08-29 1337
Calculator var numresult; var str; function onclicknum(nums) { str = document.getElementById("nummessege"); str.value = str.value + nums; } function onclickclear() { str = document.getElem
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值