多功能标准型计算器

最新推荐文章于 2022-11-06 22:27:11 发布

风叶翩翩

最新推荐文章于 2022-11-06 22:27:11 发布

阅读量481

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45743799/article/details/102866022

版权

JavaScript 专栏收录该内容

54 篇文章 3 订阅

订阅专栏

实现一个标准型计算器及其各项功能的实现

效果图欣赏

在这里插入图片描述
是不是看起来很漂亮的呢？？？

功能详解：

屏幕显示输入的数字和符号
实现加减乘除运算
回退和清零功能
小数的运算
结果的输出

相信小伙伴们都已经迫不及待的想要知道源码了。

代码展示

HTML页面代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/com.css" type="text/css" />
		
	</head>
	<body>
		<table>
		      <tr>
		          <td colspan="4"><input class="screen" type="text" disabled /></td>
		      </tr>
		      <tr>
		        <td><input class="but_ac but" type="button" value="AC" style="color: orange"></td>
		        <td><input class="but_ac but" type="button" value="<—" style="color: orange"></td>
		        <td><input class="but" type="button" value="+/-"></td>
		        <td><input class="but" type="button" value="/"></td>
		      </tr>
		      <tr>
		        <td><input class="but" type="button" value="7"></td>
		        <td><input class="but" type="button" value="8"></td>
		        <td><input class="but" type="button" value="9"></td>
		        <td><input class="but" type="button" value="*"></td>  
		      </tr>
		      <tr>
		        <td><input class="but" type="button" value="4"></td>
		        <td><input class="but" type="button" value="5"></td>
		        <td><input class="but" type="button" value="6"></td>
		        <td><input class="but" type="button" value="-"></td>
		      </tr>
		      <tr>
		        <td><input class="but" type="button" value="1"></td>
		        <td><input class="but" type="button" value="2"></td>
		        <td><input class="but" type="button" value="3"></td>
		        <td><input class="but" type="button" value="+"></td>
		      </tr>
		      <tr>
		        <td colspan="2"><input class="but" type="button" value="0" style="width: 180px"></td>
		        <td><input class="but" type="button" value="."></td>
		        <td><input class="but" type="button" value="=" style="background-color:orange ;color:white"></td>
		      </tr>
		</table>



		<script type="text/javascript" src="js/com.js"></script>


	</body>
</html>

com.js代码

window.onload = function() {
	var num = document.getElementsByClassName("but"); 
	var scr = document.getElementsByClassName("screen")[0]; 
	for (var i = 0; i < num.length; i++) 
	{
		num[i].onclick = function() {
			if (this.value == "AC") { 
				scr.value = "";
			} else if (this.value == "+/-") { 
				if (scr.value == "") {
					scr.value = "";
				}
				else if (isNaN(scr.value.charAt(scr.value.length - 1)) == false && isNaN(scr.value.charAt(scr.value.length - 2)) ==
					true) {
					scr.value = scr.value.substr(0, scr.value.length - 1) + "(" + "-" + scr.value.charAt(scr.value.length - 1) + ")";
				}
			}
			else if (this.value == "<—" && this.value != "") {

				scr.value = scr.value.substr(0, scr.value.length - 1);
			}

			else if (scr.value == "" && this.value == ".") {
				scr.value = "0.";
			}

			else if (this.value == "=") {
				scr.value = eval(scr.value);
			}

			else if (scr.value == "" && (this.value == "+" || this.value == "-" || this.value == "*" || this.value == "/")) {
				scr.value == "";
			} else {
				scr.value += this.value;
			}
		}
	}
}

上述代码能完整的实现此多功能计算器，快去完成你的个性计算器吧。

获取更多关注我呦！！！

风叶翩翩

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多功能标准型计算器

实现一个标准型计算器及其各项功能的实现效果图欣赏是不是看起来很漂亮的呢？？？功能详解：屏幕显示输入的数字和符号实现加减乘除运算回退和清零功能小数的运算结果的输出相信小伙伴们都已经迫不及待的想要知道源码了。代码展示HTML页面代码<!DOCTYPE html><html> <head> <meta charset="ut...
复制链接

扫一扫