js+html实现计算器

最新推荐文章于 2023-08-14 15:50:28 发布
原创 最新推荐文章于 2023-08-14 15:50:28 发布 · 531 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客提到最后大概的效果，建议使用Chrome来实现。 
<!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。

在一起的js+html+js的计算器
09-10
简单的js计算器。供参考，我的第一个javascript小程序,实现简单计算器
自制js+html网页版超级计算器
11-07
采用js+html实现的计算器，丰富的功能，三种主题，超级计算器不但有计算器的基本功能，还有集合输入，可以计算方差，标准差，sum，avg，logx^y,y√x,多进制转换，π,幂，随机数，阶乘，三角函数，倒计时
计算器.html
06-06
计算器.html HTML5实现的计算器。
JS + HTML实现计算器
qq_41679133的博客
07-24 380
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>
html编程计算,js html实现计算器功能
weixin_36118143的博客
06-29 378
本文实例为大家分享了html实现计算器功能的具体代码，供大家参考，具体内容如下代码：var numresult;var str;function onclicknum(nums){str = document.getElementById("nummessege");str.value = str.value + nums;}function onclickclear(){str = docume...
html + css + js 实现计算器
11-23
本项目“html + css + js 实现计算器”就是将这三者结合起来，创建一个功能完备的在线计算器。 首先，让我们详细了解一下HTML部分。HTML文档通常由一系列的元素构成，这些元素通过标签来定义。在这个计算器项目中，...
精选资源
纯 HTML+CSS+JavaScript 的计算器
01-21
需求：制作web版计算器，要求实现+-*%和平方，开方。 2.0版：修复归零的问题 3.0版：支持正负数； 4.0版：修复多个多个运算符号导致不能计算的bug; 5.0版： 多个小数点的bug， 自然数e的问题， 0.1，0.2，0.04等...
基于html+css+js实现简易计算器代码实例
10-15
最后，JavaScript（JavaScript Object Notation）负责实现计算器的功能。在`contain.js`中，我们可以编写事件监听器和计算逻辑。例如： ```javascript function get(value) { document.querySelector('#display')....
基于uniApp的Vue+JavaScript+CSS+HTML工资计算器设计源码
最新发布
02-07
本文所述的基于uniApp的Vue框架开发的工资计算器，为用户提供了集成了Vue、JavaScript、CSS和HTML技术的解决方案，旨在简化工资计算流程，并提供更为人性化的交互体验。 该工资计算器的设计充分考虑了各类用户的...
用JavaScript和HTML实现一个精美的计算器
黑夜开发者的博客
07-29 3642
计算器是我们日常生活中经常使用的工具之一，可以帮助我们进行简单的数学运算。在本博文中，我将使用JavaScript编写一个漂亮的计算器，并添加加减乘除功能。这个计算器将有一个精美的用户界面，包含9个数字按钮和加减乘除操作符。好了，本文的内容就分享到这里。希望你在使用这个精美计算器的过程中有所收获，它不仅能帮助你进行基本的数学运算，还能为你提供一个愉快的使用体验。如果你对编程感兴趣，也欢迎自行扩展功能，让这个计算器变得更加强大。
用html+js实现的等额本息贷款月供计算器
12-04
用html+js实现的等额本息贷款月供计算器
html+js简易计算器
11-01
html+javaScript实现简易计算器。。。。。。。。。。。
js html5仿apple苹果计算器样式代码
09-08
js html5仿apple苹果计算器样式代码
网页版计算器.html
10-13
用html写的网页版计算器，自己做的作业，可供初学者参考
JS实现简易的计算器
weixin_34318326的博客
10-17 345
JS可以做的事多了，那就用来实现一个计算器吧   看看手机中的计算器，分为普通计算器和科学计算器       自认脑袋不够大，就实现一个普通版本的吧（支持正负数加减乘除等基本连续的运算，未提供括号功能） 看看图示效果, 或 在线演示   一、知识准备 1+1 = ? 正常来说，我们看到这个表达式都知道怎么运算，知道运算结果 但计算机不一样，计算机无法识别出这串表达...
HTML和JavaScript实现一个简单的计算器
qq_57142520的博客
08-14 1973
使用HTML和JavaScript实现一个简单的计算器。
HTML计算器
牛奶爱上咖啡的博客
10-24 1156
计算器         *{ font-size:18px;}     #t{ width:210px; height:40px;} .shaw{ width:70px; height:40px;} .equal{ width:70px; height:80px;}     var flag=true; //设置标志，用于没有输入时显示0，以及有显示时清空      
html计算器
weixin_43181967的博客
08-16 1933
html计算器
html+js实现计算器
04-27
好的，以下是一个简单的HTML和JavaScript实现计算器的示例： ```html <!DOCTYPE html> <html> <head> <title>计算器</title> </head> <body> <input type="text" id="input" disabled><br> <button onclick="clearInput()">清空</button> <button onclick="backspace()">退格</button><br> <button onclick="appendToInput('7')">7</button> <button onclick="appendToInput('8')">8</button> <button onclick="appendToInput('9')">9</button> <button onclick="appendToInput('/')">÷</button><br> <button onclick="appendToInput('4')">4</button> <button onclick="appendToInput('5')">5</button> <button onclick="appendToInput('6')">6</button> <button onclick="appendToInput('*')">×</button><br> <button onclick="appendToInput('1')">1</button> <button onclick="appendToInput('2')">2</button> <button onclick="appendToInput('3')">3</button> <button onclick="appendToInput('-')">-</button><br> <button onclick="appendToInput('0')">0</button> <button onclick="appendToInput('.')">.</button> <button onclick="calculate()">=</button> <button onclick="appendToInput('+')">+</button><br> <script> function appendToInput(val) { document.getElementById('input').value += val; } function clearInput() { document.getElementById('input').value = ''; } function backspace() { var input = document.getElementById('input').value; document.getElementById('input').value = input.substring(0, input.length - 1); } function calculate() { var input = document.getElementById('input').value; var result = eval(input); document.getElementById('input').value = result; } </script> </body> </html> ``` 这个计算器的界面由一些按钮和一个输入框组成，按钮被点击时会调用对应的JavaScript函数。`appendToInput`函数用于将按钮的值添加到输入框中，`clearInput`函数用于清空输入框，`backspace`函数用于删除输入框中的最后一个字符，`calculate`函数用于计算输入框中的表达式并将结果显示在输入框中。注意，这个计算器的计算方法使用了JavaScript内置的`eval`函数，这个函数可以计算字符串表达式的值，但是需要注意安全问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值