JavaScript实现简单的计算器
程序员文章站
2022-05-26 08:40:43
...
这里写自定义目录标题
JavaScript实现简单的计算器
本篇只是简单的利用javascript语言进行简单的计算器的实现主要实现功能为数字运算的加减乘除运算，其他运算使用math对象中的属性实现，在这里不做赘述，只说明加减乘除，如果有任何问题，欢迎留言。
成品展示
相关代码
简单计算器的实现，使用的是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;}
主要代码已附上，资源已上传，如果需要文件包自行下载
有任何问题，欢迎留言！
下一篇： java实现简单的计算器