js+html实现计算器

最新推荐文章于 2023-12-05 18:30:09 发布
最新推荐文章于 2023-12-05 18:30:09 发布
阅读量465 收藏 1
点赞数
分类专栏： js html css jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/docwangsir/article/details/95633997
版权
js 同时被 3 个专栏收录
25 篇文章 0 订阅
订阅专栏
css
12 篇文章 0 订阅
订阅专栏
html
9 篇文章 0 订阅
订阅专栏 
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.main {
	width: 600px;
	height: 600px;
	border: 2px solid black;
	margin: 0 auto; 
	background: #F0FFFF;
	border-radius: 5px;
}
.screen {
	margin: 10px auto;
	width: 80%;
	height: 10%;
	border: 2px solid black;
	background: #E6E6FA;
	display: flex;
	border-radius: 5px;
	position: relative;
}
.operations{
	line-height:60px;
	font-size:20px;
}
.keyBoard {
	margin: 10px auto;
	width: 85%;
	height: 80%;
	border: 2px solid black;
	background: LightCyan;
	display: flex;
	flex-wrap: wrap;
	border-radius: 5px;
}
.keys {
	width: 120px;
	height: 20%;
	margin: 10px 1.5px;
	border: 2px solid black;
	font-family: fantasy;
	font-size: 20px;
	text-align: center;
	line-height: 100px;
	font-weight: bold;
	border-radius: 5px;
}
.keys:hover {
	background: #FFE4B5; 
}
#clear {
	margin-left: 420px;
	width: 58px;
	height: 58px;
	border: 2px solid black;
	border-radius: 29px;
	font-family: fantasy;
	font-size: 20px;
	text-align: center;
	font-weight: bold;
	position: fixed;
}
#clear:hover {
	background: #FFE4B5;
}
</style>
</head>
<body>
<div class="main">
	<div class="screen">
		<span class="operations" id="shu"></span>
		<span class="operations" id="operation"></span>
		<span class="operations" id="beiShu"></span>
		<div  class="operations" id="clear">清空</div>
	</div>
	<div class="keyBoard">
		<div class="keys" >7</div>
		<div class="keys" >8</div>
		<div class="keys" >9</div>
		<div class="keys" >*</div>
		<div class="keys" >4</div>
		<div class="keys" >5</div>
		<div class="keys" >6</div>
		<div class="keys" >-</div>
		<div class="keys" >1</div>
		<div class="keys" >2</div>
		<div class="keys" >3</div>
		<div class="keys" >+</div>
		<div class="keys" >0</div>
		<div class="keys" >.</div>
		<div class="keys" >=</div>
		<div class="keys" >/</div>
	</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
//加函数
var add = () => {
	let shuVal = $("#shu").html();
	let beiShuVal = $("#beiShu").html();
	let jianShu = Number(shuVal);
	let beiJianShu = Number(beiShuVal);
	if(shuVal == ""){
		alert("请输入加数");
	}
	if(beiShuVal == ""){
		alert("请输入被加数");
	}
	return jianShu+beiJianShu;
}
var sub = () => {
	let shuVal = $("#shu").html();
	let beiShuVal = $("#beiShu").html();
	let jianShu = Number(shuVal);
	let beiJianShu = Number(beiShuVal);
	if(shuVal == ""){
		alert("请输入被减数");
	}
	if(beiShuVal == ""){
		alert("请输入减数");
	}
	return jianShu-beiJianShu;
}
var mul = () => {
	let shuVal = $("#shu").html();
	let beiShuVal = $("#beiShu").html();
	let jianShu = Number(shuVal);
	let beiJianShu = Number(beiShuVal);
	if(shuVal == ""){
		alert("请输入被乘数");
	}
	if(beiShuVal == ""){
		alert("请输入乘数");
	}
	return jianShu*beiJianShu;
}
var chu = () => {
	let shuVal = $("#shu").html();
	let beiShuVal = $("#beiShu").html();
	let jianShu = Number(shuVal);
	let beiJianShu = Number(beiShuVal);
	if(shuVal == ""){
		alert("请输入被除数");
	}
	if(beiShuVal == ""){
		alert("请输入除数");
	}
	return jianShu/beiJianShu;
}

//获取按键DOM
var keys = document.getElementsByClassName("keys");

//加减乘除操作开关
var witch = false;
//0加1减2乘3除
var operation = 0;
//按键监听函数
var listenKeys = () => {
	for(let i=0; i < keys.length; i++){
		keys[i].onclick = function(){
			let type = this.innerText;
			let beiShu = $("#shu");
			let shu = $("#beiShu");
			let operationNode = $("#operation");
			console.log(type);
			switch (type) {
				case "1":
				{
					console.log("我到了");
					if(witch){
						shu.append(type);
					}else{
						beiShu.append(type);
					}
					break;
				}
				case "0":
				{
					if(witch){
						shu.append(type);
					}else{
						beiShu.append(type);
					}
					break;
				}
				case "2":
				{
					if(witch){
						shu.append(type);
					}else{
						beiShu.append(type);
					}
					break;
				}
				case "3":
				{
					if(witch){
						shu.append(type);
					}else{
						beiShu.append(type);
					}
					break;
				}
				case "4":
				{
					if(witch){
						shu.append(type);
					}else{
						beiShu.append(type);
					}
					break;
				}
				case "5":
				{
					if(witch){
						shu.append(type);
					}else{
						beiShu.append(type);
					}
					break;
				}
				case "6":
				{
					if(witch){
						shu.append(type);
					}else{
						beiShu.append(type);
					}
					break;
				}
				case "7":
				{
					if(witch){
						shu.append(type);
					}else{
						beiShu.append(type);
					}
					break;
				}
				case "8":
				{
					if(witch){
						shu.append(type);
					}else{
						beiShu.append(type);
					}
					break;
				}
				case "9":
				{
					if(witch){
						shu.append(type);
					}else{
						beiShu.append(type);
					}
					break;
				}
				case "+":
				{
					witch = true;
					operationNode.html(type);
					operation = 0;
					break;
				}
				case "-":
				{
					witch = true;
					operationNode.html(type);
					operation = 1;
					break;
				}
				case "*":
				{
					witch = true;
					operationNode.html(type);
					operation = 2;
					break;
				}
				case "/":
				{
					witch = true;
					operationNode.html(type);
					operation = 3;
					break;
				}
				case "=":
				{
					switch(operation){
						case 0:{
							let res = add();
							beiShu.html(res);
							shu.html("");
							operationNode.html("");
							witch = false;
							break;
						}
						case 1:{
							let res = sub();
							beiShu.html(res);
							shu.html("");
							operationNode.html("")
							witch = false;
							break;
						}
						case 2:{
							let res = mul();
							beiShu.html(res);
							shu.html("");
							operationNode.html("")
							witch = false;
							break;
						}
						case 3:{
							let res = chu();
							beiShu.html(res);
							shu.html("");
							operationNode.html("")
							witch = false;
							break;
						}
					}
					break;
				}
			}
		} 
	}
}


//清除函数
var clear = () => {
	$("#clear").click( () => {
		let beiShu = $("#shu");
		let shu = $("#beiShu");
		let operationNode = $("#operation");
		beiShu.html("");
		shu.html("");
		operationNode.html("");
	})
}

//主运行函数
var main = () => {
	listenKeys();
	clear();
}
main();
</script>
</body>
</html>

最后大概的效果是这样的，建议用chrome。

docwangsir
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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 + css + js 实现计算器
11-23
本项目“html + css + js 实现计算器”就是将这三者结合起来，创建一个功能完备的在线计算器。 首先，让我们详细了解一下HTML部分。HTML文档通常由一系列的元素构成，这些元素通过标签来定义。在这个计算器项目中，...
html实现计算器源码
xcLeigh
11-21 1822
html实现计算器源码，计算器源码，简易计算器功能实现，加减乘除，平方，根号等基本算数功能实现，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
HTML程序大全(1)：简易计算器
最新发布
joe_g12345的博客
12-05 2683
这是一个简单的计算器，使用HTML、CSS和JavaScript实现。HTML代码创建了一个计算器的界面，CSS代码设置了计算器的样式，JavaScript代码实现了计算器的功能。这个计算器可以执行加、减、乘、除和取模运算。同时，它还支持小数点和多位数运算。
利用HTML+JS+CSS实现简单的网页计算器，附html所有源代码，可直接黏贴运行
Rosen's
08-09 5541
最终实现的效果图 源码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Calculator</title> </head> <style> *{ font-size...
HTML简单计算器
一加一等于十的博客
10-17 463
简单计算器
html+js实现简易计算器功能
04-22
简易计算器，利用html+js实现，通过浏览器客户端进行编译实现，弹出窗口，进行选择计算。
纯 HTML+CSS+JavaScript 的计算器
01-21
需求：制作web版计算器，要求实现+-*%和平方，开方。 2.0版：修复归零的问题 3.0版：支持正负数； 4.0版：修复多个多个运算符号导致不能计算的bug; 5.0版： 多个小数点的bug， 自然数e的问题， 0.1，0.2，0.04等...
用 js+html 实现一个网页计算器
05-31
使用js + html 实现的简单的网页计算器，可以实现加、减、乘、除复杂运算，二进制、八进制、十六进制转换、sin、cos、tan三角函数运算、acos、atan、asin反三角函数运算、开平方、log、随机数生成、指数运算、四舍五...
基于html+css+js实现简易计算器代码实例
10-15
最后，JavaScript（JavaScript Object Notation）负责实现计算器的功能。在`contain.js`中，我们可以编写事件监听器和计算逻辑。例如： ```javascript function get(value) { document.querySelector('#display')....
html静态前端计算器页面
08-17
简单的html与scc代码做个静态的计算器，喜欢的朋友可以参考，背景图片来源网络竟提供参考
HTML5实现网页计算器
08-18
这是个用html5 + css3 + js写的网页计算器，支持括号运算，支持键盘输入、删除键删除输入，按键盘时计算器按键发亮
html+js简易计算器
11-01
html+javaScript实现简易计算器。。。。。。。。。。。
自制js+html网页版超级计算器
11-07
采用js+html实现的计算器，丰富的功能，三种主题，超级计算器不但有计算器的基本功能，还有集合输入，可以计算方差，标准差，sum，avg，logx^y,y√x,多进制转换，π,幂，随机数，阶乘，三角函数，倒计时
html实现计算器
qq_46578318的博客
06-10 7698
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Calculator</title> </head> <style> *{ font-size:36px;} table{ background-color: thistle; } .
html+css+js实现简易计算器
weixin_45118138的博客
05-02 1万+
使用JavaScript制作一个简单的计算器 直接看效果，这个计算器可以实现简单的加减乘除 1、首先编辑HTML样式，把计算机上的按键全部打印出来 可以显示出以下结果 2、添加css样式 先设置a元素定宽定高，然后左浮动，在微调宽度和高度，使其到达一个合理布局的值 3、编写js代码 写一个for循环，不断接收a点击事件。 编写点击result，点击清零。 3. 点击数字，获取num1和num2的值。 4.获取按键加减乘除，记录下符号 5....
HTML作业-简易计算器
qq_40467855的博客
12-13 1472
使用eval()函数完成简单的四则运算。具体请看代码，菜鸡勿喷。
html网页版经典计算器（EVAl）
笙烛
04-13 2856
##eval函数 用于计算 ##图片 #代码 <!doctype html> <html> <head> <title>计数器</title> <script language="JavaScript"> <!-- var num1="0+" var i=0 function f(value){ if(pars...
HTML5实现简易计算器
热门推荐
一个农名工
12-11 2万+
闲来无聊，用H5写了一个简易版计算器，只是简单地一元运算，功能不多说，直接上代码，注释很详细；(ノ￣▽￣)   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content=&q
html+js实现计算器
04-27
好的，以下是一个简单的HTML和JavaScript实现计算器的示例： ```html <!DOCTYPE html> <html> 计算器 <input type="text" id="input" disabled><br> ()">清空 ()">退格</button><br> ('7')">7 ('8')">8...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值