JavaScript实现简单的计算器

最新推荐文章于 2024-09-10 23:15:34 发布

jordan_wzg

最新推荐文章于 2024-09-10 23:15:34 发布

阅读量638

点赞数 1

分类专栏： js实现计算计算器 JavaScript

本文链接：https://blog.csdn.net/jordan_wzg/article/details/105092577

版权

js实现计算同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

计算器

1 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

JavaScript实现简单的计算器
- 成品展示
- 相关代码

JavaScript实现简单的计算器

本篇只是简单的利用javascript语言进行简单的计算器的实现主要实现功能为数字运算的加减乘除运算，其他运算使用math对象中的属性实现，在这里不做赘述，只说明加减乘除，如果有任何问题，欢迎留言。

成品展示

主要使用了css文件实现界面和js函数实现计算功能

相关代码

简单计算器的实现，使用的是jsp页面作为前台页面，然后在js文件中创建方法实现计算。

jsp代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>简洁计算器</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script src="js/show.js"></script>
</head>
<body>
<div id="calcuator">
	<input type="text" id="show" value="0" size="21" maxlength="21" readonly="readonly" class="text"/>
	<div id="btn-list">
		<div onclick="qingling()" class="color-red clear-marginleft">C</div>
		<div onclick="wenzi(this.id)" class="color-blue" id="buzhidao">+/-</div>
		<div onclick="wenzi(this.id)" class="color-blue" id="quyu">%</div>
		<div onclick="fuhao(this.id)" class="btn-70 color-red font-14" id="tuige"><-</div>
		<div onclick="shuzi(this.id)" class=" clear-marginleft" id ="7">7</div>
		<div onclick="shuzi(this.id)" class="" id = "8">8</div>
		<div onclick="shuzi(this.id)" class="" id = "9">9</div>
		<div onclick="fuhao(this.id)" class=" color-blue font-14" id="add">+</div>
		<div onclick="fuhao(this.id)" class=" color-blue font-14" id="jian">-</div>
		<div onclick="shuzi(this.id)" class=" clear-marginleft" id="4">4</div>
		<div onclick="shuzi(this.id)" class="" id = "5">5</div>
		<div onclick="shuzi(this.id)" class="" id="6">6</div>
		<div onclick="fuhao(this.id)" class=" color-blue font-14" id="cheng">×</div>
		<div onclick="fuhao(this.id)" class=" color-blue font-12" id ="chu">÷</div>
		<div onclick="shuzi(this.id)" class=" clear-marginleft" id= "1">1</div>
		<div onclick="shuzi(this.id)" class="" id="2">2</div>
		<div onclick="shuzi(this.id)" class="" id="3">3</div>
		<div onclick="wenzi(this.id)" class=" color-blue font-14" id="pingfang" id ="pingfang">×²</div>
		<div onclick="wenzi(this.id)" class=" color-blue font-12" id="pingfanggen">√</div>
		<div onclick="shuzi(this.id)" class="btn-70  clear-marginleft" id="0">0</div>
		<div onclick="fuhao(this.id)" class="" id=".">.</div>
		<div onclick="equal()" class="btn-70  color-red font-14">=</div>
	</div>
</div>
<div style="text-align:center;">
<p>jordan_wzg<a href="http://www.mycodes.net/" target="_blank">出品</a></p>
</div>
</body>
</html>

js文件代码：

//清零操作
function qingling(){
	show.value=0;
}
//数字
var num;
function shuzi(num){
	var x=num;
	if(show.value==0){		
		show.value=x;	
	}else{
		show.value=show.value+x;
	}
}
//符号
var fuhao;
function fuhao(fuhao){
	switch(fuhao){
	case "add":
		show.value=show.value+"+";
		break;
	
	case "jian":
		show.value=show.value+"-";
		break;
	
	case "cheng":
		show.value=show.value+"*";
		break;
	
	case "chu":
		show.value=show.value+"/";
		break;
		
	
	case ".":
		show.value=show.value+"."
		break;
		
	case "tuige":
			var arr1= new Array();
			arr1=show.value;
			show.value = arr1.substring(0, arr1.length - 1);	
			if(show.value==0){
				show.value=0
			}
		
		break;
		
	default:
		show.value="Erorr"
		break;
	
	}
}	

//等于
function equal(){
	if(show.value==0){		
		show.value="无数据处理！";	
	}else{
		show.value=eval(show.value);
	}
	
}
var id;
function wenzi(id){
	switch (id) {
	case "buzhidao":
		show.value="该功能有待实现";
		break;
		
	case "quyu":
		show.value="该功能有待实现";
		break;
		
	case "pingfang":
		show.value="该功能有待实现";
		break;
		
	case "pingfanggen":
		show.value="该功能有待实现";
		break;

	default:
		break;
	}
	
}

css文件代码：

@charset "utf-8";
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input{margin:0;padding:0;-webkit-text-size-adjust:none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div{text-align:left}
a img{border:0}
body{color:#333;text-align:center;font:12px "微软雅黑";}
ul, ol, li{list-style-type:none;vertical-align:0}
a{outline-style:none;color:#535353;text-decoration:none}
a:hover{color:#D40000;text-decoration:none}
.clear{height:0;overflow:hidden;clear:both}

/* calcuator */
#calcuator{width:200px;height:245px;padding:10px;border:1px solid #e5e5e5;background:#f8f8f8;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;box-shadow:0px 0px 10px #f2f2f2;-moz-box-shadow:0px 0px 10px #f2f2f2;-webkit-box-shadow:0px 0px 10px #f2f2f2;margin:40px auto 0 auto;}
#calcuator .text{margin:0;width:187px;padding:9px 5px;height:14px;border:1px solid #e5e5e5;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;background:#FFF;text-align:right;line-height:14px;font-size:12px;font-family:Verdana, Geneva, sans-serif;color:#666;outline:none; text-transform:uppercase;}
#calcuator #btn-list{width:200px;overflow:hidden;}
#calcuator #btn-list div{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;border:1px solid #e5e5e5;background:-webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#ebebeb));background:-moz-linear-gradient(top, #f7f7f7,#ebebeb);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f7f7f7,endColorstr=#ebebeb,grandientType=1);line-height:29px;text-align:center;text-shadow:0px 1px 1px #FFF;font-weight:bold;font-family:Verdana, Geneva, sans-serif;color:#666;float:left;margin-left:11px;margin-top:11px;font-size:12px;cursor:pointer;}
#calcuator #btn-list .btn-radius:active{background:#ffffff;}
#calcuator #btn-list .clear-marginleft{margin-left:0;}
#calcuator #btn-list .font-14{font-size:14px;}
#calcuator #btn-list .color-red{color:#ff5050}
#calcuator #btn-list .color-blue{color:#00b4ff}
#calcuator #btn-list div{width:29px;height:29px;}
#calcuator #btn-list .btn-70{width:70px;height:29px;}

主要代码已附上，资源已上传，如果需要文件包自行下载
有任何问题，欢迎留言！