先看一下效果圖：
可能是最近一段時間用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>