基于JavaScript的简易计算器

最新推荐文章于 2024-08-12 09:24:46 发布

砖厂打工仔

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量142

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42456748/article/details/108829178

版权

本文介绍了如何使用JavaScript创建一个简单的计算器。提供了计算器的源代码，并提到了代码中存在一些未解决的bug，适合初学者参考学习。

摘要由CSDN通过智能技术生成

基于JavaScript的简易计算器

效果图：

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.dome {
				width: 400px;
				height: 430px;
				margin: 50px auto;
				background: #CCC;
				padding: 20px;
			}

			.dome>input {
				width: 100%;
				height: 50px;
				font-size: 24px;
				margin-bottom: 30px;
			}

			.dome>button {
				width: 90px;
				height: 60px;
				background-color: white;
				border: none;
				margin: 5px;
				float: left;
				font-size: 18px;
			}

			button:hover {
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="dome">
			<!-- disabled="disabled" 禁用输入框 -->
			<input type="" name="" id="ipt" value="0" />
			<button class="num">7</button>
			<button class="num">8</button>
			<button class="num">9</button>
			<button id="del">←</button>

			<button class="num">4</button>
			<button class="num">5</button>
			<button class="num">6</button>
			<button class="ysf">+</button>

			<button class="num">1</button>
			<button class="num">2</button>
			<button class="num">3</button>
			<button class="ysf">-</button>

			<button>%</button>
			<button class="num">0</button>
			<button class="num">.</button>
			<button class="ysf">*</button>

			<button id="clear">AC</button>
			<button class="ysf">/</button>
			<button id="result" style="width: 190px; background-color: #333; color: white;">=</button>
		</div>
	</body>
</html>
<script type="text/javascript">
	//1.把数字和小数点归为一类。class="num"
	//2.把加减乘除运算符归为一类。
	//3.显示框，退格键，归零键，等号 单独设置id。
	//4.把显示框，归零键，等号，退格 标签对象获取出来。
	//5.点击数字，在显示框上显示
	//6.要做运算，条件得两个数和一个运算符
	//7.定义三个变量用来接收第一个数，第二个数和运算符。
	//8.四则运算
	var numValue1 = '';
	var numValue2 = '';
	var czf = '';
	var ipt = document.getElementById("ipt");
	var del = document.getElementById("del");
	var clear = document.getElementById("clear");
	var result = document.getElementById("result");

	var numArr = document.getElementsByClassName("num");
	for (var i = 0; i < numArr.length; i++) {
		//给每个数字绑定单击事件
		numArr[i].onclick = function() {
			//判断用户是否在输入小数点
			if(this.innerText=="."){
				//alert("点小数点了");
				if(numValue1.indexOf(".")==-1&&numValue1.length>=1){
					// var num = this.innerText;
					// alert(num);
					numValue1 += this.innerText;
					//乘1会去掉首尾无效的0
					ipt.value = numValue1*1;
				}
			}else{
				// var num = this.innerText;
				// alert(num);
				numValue1 += this.innerText*1;
				//乘1会去掉首尾无效的0
				ipt.value = numValue1;
			}
		}
	}

	//给运算符绑定单击事件
	var ysfArr = document.getElementsByClassName("ysf");
	for (var i = 0; i < ysfArr.length; i++) {
		//给每个数字绑定单击事件
		ysfArr[i].onclick = function() {
			//当用户点击了运算符，把第一个数字给第二个数字，然后把第一个数字清空，用来接收用户输入的第二个数字
			//alert(this.innerText);
			if (numValue2 == '') {
				numValue2 = numValue1;
				numValue1 = '';
				czf = this.innerText;
				//alert("普通运算");
			} else {
				//有可能会进行四则运算
				//alert("有可能会进行四则运算");
				if(numValue1!=''){
					resultFun();
				}
			}
			//保存操作符
			czf = this.innerText;
		}
	}

	//给等号绑定单击事件，进行运算
	result.onclick = function() {
		resultFun();
	}

	//运算结果
	function resultFun() {
		var one = Number(numValue2);
		var two = Number(numValue1);
		var r = null;
		switch (czf) {
			case '+':
				r = one + two;
				break;
			case '-':
				r = one - two;
				break;
			case '*':
				r = one * two;
				break;
			case '/':
				if (two == 0) {
					alert("除数不能为0");
					numValue1 = '';
					numValue2 = '';
					czf = '';
					r = 0;
				} else {
					r = one / two;
				}
				break;
		}
		//四则运算时，把上一次运算的结果给numValue2，然后把numValue1 清空
		
		numValue2 = new Number(r).toFixed(4)*1;
		numValue1='';
		ipt.value = numValue2;
	}

	//归零键
	clear.onclick = function() {
		numValue1 = '';
		numValue2 = '';
		czf = '';
		ipt.value = '0';
	}

	//退格键
	del.onclick = function() {
		if (numValue1.length >= 1) {
			numValue1 = numValue1.substring(0, numValue1.length - 1);
			ipt.value = numValue1;
		}else if(numValue2.length >= 1){
			numValue2 = numValue2.substring(0, numValue2.length - 1);
			ipt.value = numValue2;
		}else {
			numValue1 = '';
			numValue2 = '';
			czf = '';
			ipt.value = '0';
		}
	}
</script>

补充说明：仍有部分bug尚未解决，因作者水平有限，代码仅供参考。

砖厂打工仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于JavaScript的简易计算器

基于JavaScript的简易计算器效果图：源代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .dome { width: 400px; height:
复制链接

扫一扫