您的位置：首页 > Web前端 > JavaScript

js实现简单计算器

2017-08-01 10:11 169 查看
先看一下效果图：



可能是最近一段时间用ul用多了，这些块都是li元素，后面发现button好像更好用一些。但还是能做的。

布局就不说了，会html和css的这个肯定会，贴上代码：

<style>
body{margin:0;padding:0;}

.container{
margin:auto;
margin-top:200px;
width:300px;
height:300px;
background:#0066ff;
}

.screen{
float:left;
margin:15px;
margin-bottom:0;
width:270px;
height:50px;
background:#FFFFFF;
}

.container ul{
float:left;
margin:15px;
margin-top:0;
padding:0;
width:270px;
}

.container ul li{
list-style:none;
text-align:center;
display:block;
float:left;
margin-left:20px;
margin-top:20px;
padding:7px;
width:30px;
height:20px;
background:#3300cc;
}

.container ul li a{
text-decoration:none;
font-size:20px;
color:#ffffff;
}

</style>
首先添加鼠标移入移出相应的块的事件，先获取元素：

var oLi=document.getElementsByTagName("li");


再建一个for循环，给每一个li元素加入鼠标事件：

for(var i = 0;i < oLi.length;i++){//给每个li元素加上鼠标移入移出事件
//console.log(i);
oLi[i].onmouseover=function(){
this.style.backgroundColor="#f96";
//console.log(this)
}
oLi[i].onmouseout=function(){
this.style.backgroundColor="#30c";
}


这里要用this,表示是哪个li元素发生的事件，就对哪个li元素做相应的改变，如果用oLi[i]的话，因为加载完js后，i变成了oLi.length，会报错，并且也无法区别不同的li元素。

接下来加入点击事件：

oLi[i].onclick=function(){//添加鼠标点击事件
var oC = this.childNodes;//获取li元素下的a元素
var flag;//判断标志
switch(oC[0].innerText){//判断点击的是哪种类型
case '1':
flag=0;
break;
case '2':
flag=0;
break;
case '3':
flag=0;
break;
case '4':
flag=0;
break;
case '5':
flag=0;
break;
case '6':
flag=0;
break;
case '7':
flag=0;
break;
case '8':
flag=0;
break;
case '9':
flag=0;
break;
case '0':
flag=0;
break;

case '+':
flag=1;
break;
case '-':
flag=1;
break;
case '*':
flag=1;
break;
case '/':
flag=1;
break;

case 'Del':
flag=2;
break;

case '=':
flag=3;
break;
}
if(flag == 0){
if(oFlag != 2){
result += oC[0].innerText;
oFlag = 0;
oT.value = result;
}else{
alert("输入错误！");
}
}
else if(flag == 1){
if(oFlag != 1){
//console.log(oC[0].innerText)
//console.log(result)
oFlag= 1;
result += oC[0].innerText;
oT.value = result;
}else{
alert("输入错误！");
}
}
else if(flag == 2){
result="";
oT.value = result;
}
else{
if(oFlag != 1){
oFlag = 2;
result=eval(result);
oT.val
4000
ue = result;
}else{
alert("输入错误！");
}
}
}}


函数作用的百度都有，我就不解释了。这里讲一下思想，因为是要给每个li元素添加点击事件，但要知道是点击的哪个，就要获取li元素下的a元素的innerText。

然后我分了四类，数字一类，运算符号一类，Del一类，等于号一类，用一个flag来区分，这里我为什么要把数字和运算符号分开，是为了防止输入错误，比如4**之类的，

会提示输入错误。只要加入一个全局变量oFlag,为什么要用全局，主要是想保存它的值，如果放函数里，每次点击事件初始化变量就会改变它的值。oFlag保存的是上一个

输入的是什么类型的值，比如上一个是运算符，下一个只能是数字。这里列出以下会报错的输入：

上一个是运算符，下一个是运算符或等于。
上一个是等于，下一个数字。

存在的问题： 1.功能过于单一

2.小数部分没做

这是一个只实现了四则运算的计算器，如果有时间，还可以加上其他的运算。

这里贴下body和js的代码：

<body>
<div class="container">
<div class="screen">
<input id = "text" type = "text" style="width:100%;height:100%;text-align:right;" readonly="readonly"></input>
</div>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">Del</a></li>

<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">*</a></li>

<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">/</a></li>

<li><a href="#">+</a></li>
<li><a href="#">0</a></li>
<li><a href="#">-</a></li>
<li><a href="#">=</a></li>
</ul>
</div>
<script>
var oLi=document.getElementsByTagName("li");
var oT = document.getElementById("text");
var oA=document.getElementsByTagName("a");
var result="";
var oFlag;//判断标志,防止输入错误
for(var i = 0;i < oLi.length;i++){//给每个li元素加上鼠标移入移出事件
//console.log(i);
oLi[i].onmouseover=function(){
this.style.backgroundColor="#f96";
//console.log(this)
}
oLi[i].onmouseout=function(){
this.style.backgroundColor="#30c";
}
//console.log(i);
oLi[i].onclick=function(){//添加鼠标点击事件
var oC = this.childNodes;//获取li元素下的a元素
var flag;//判断标志
switch(oC[0].innerText){//判断点击的是哪种类型
case '1':
flag=0;
break;
case '2':
flag=0;
break;
case '3':
flag=0;
break;
case '4':
flag=0;
break;
case '5':
flag=0;
break;
case '6':
flag=0;
break;
case '7':
flag=0;
break;
case '8':
flag=0;
break;
case '9':
flag=0;
break;
case '0':
flag=0;
break;

case '+':
flag=1;
break;
case '-':
flag=1;
break;
case '*':
flag=1;
break;
case '/':
flag=1;
break;

case 'Del':
flag=2;
break;

case '=':
flag=3;
break;
}
if(flag == 0){
if(oFlag != 2){
result += oC[0].innerText;
oFlag = 0;
oT.value = result;
}else{
alert("输入错误！");
}
}
else if(flag == 1){
if(oFlag != 1){
//console.log(oC[0].innerText)
//console.log(result)
oFlag= 1;
result += oC[0].innerText;
oT.value = result;
}else{
alert("输入错误！");
}
}
else if(flag == 2){
result="";
oT.value = result;
}
else{
if(oFlag != 1){
oFlag = 2;
result=eval(result);
oT.value = result;
}else{
alert("输入错误！");
}
}
}
}
/*for(var i = 0;i < oA.length;i++){
console.log(i);
oA[i].onclick=function(){

}
}*/
</script>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航