先看一下效果图：
可能是最近一段时间用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].οnmοuseοver=function(){
this.style.backgroundColor="#f96";
//console.log(this)
}
oLi[i].οnmοuseοut=function(){
this.style.backgroundColor="#30c";
}
这里要用this,表示是哪个li元素发生的事件，就对哪个li元素做相应的改变，如果用oLi[i]的话，因为加载完js后，i变成了oLi.length，会报错，并且也无法区别不同的li元素。
接下来加入点击事件：
oLi[i].οnclick=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("输入错误！");
}
}
}}
函数作用的百度都有，我就不解释了。这里讲一下思想，因为是要给每个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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >1</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >2</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >3</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Del</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >4</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >5</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >6</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >*</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >7</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >8</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >9</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >/</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >+</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >0</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >-</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >=</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].οnmοuseοver=function(){
this.style.backgroundColor="#f96";
//console.log(this)
}
oLi[i].οnmοuseοut=function(){
this.style.backgroundColor="#30c";
}
//console.log(i);
oLi[i].οnclick=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].οnclick=function(){
}
}*/
</script>
</body>