分享一個用JS做簡單的計算器的代碼,自己寫的,馬馬虎虎
下面是代碼:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>計算器</title>
<style>/*樣式隨便造,自己看着順眼就行*/
#all{width: 300px;
height: 500px;
background: #ccc;
margin: auto;
}
td{width: 60px;
height: 60px;
text-align: center;
}
#jp{width: 270px;
height: 80px;
margin: 0 auto;
position: relative;
}
#jg{width: 270px;
height: 70px;
background: #ffffff;
position: absolute;
top: 10px;
}
</style>
<!--********下面是JS代碼*******-->
<script>
//定義全局變量
var tds=null;
var jg=null;
var dengyu=null;
var cle=null;
var tg=null;
//window加載完成后執行
window.onload=function(){
tds=document.getElementsByTagName("td");
jg=document.getElementById("jg");
dengyu=document.getElementById("dengyu");
tg=document.getElementById("tg");
cle=document.getElementById("cle");
addevt();
}
function addevt(){
for(var i=0;i<tds.length;i++){//利用for循環將按鍵里的個別按鍵剔除,因為這里是做的表格數組
var idZhi=tds[i].getAttribute("id");
if(idZhi){
continue; //遇到帶“id”屬性的就跳過
}
tds[i].onclick=function(){//為不帶“id”的按鍵添加點擊事件
jg.innerHTML+=this.innerHTML;//將按鍵的內容輸入到顯示區域
}
}
//******單獨為帶id屬性的按鍵設置點擊事件*****
dengyu.onclick=function(){//等於
jg.innerHTML=eval(jg.innerHTML);
}
cle.onclick=function(){//清空
jg.innerHTML="";
}
tg.onclick=function(){//退格
var str=jg.innerHTML;
jg.innerHTML=str.substr(0,str.length-1);
}
}
</script>
</head>
<!--以下是頁面-->
<body>
<div id="all">
<div id="jp">
<div id="jg"></div>
</div>
<table width="90%" height="300" border="1" align="center" cellspacing="10">
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>+</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>*</td>
</tr>
<tr>
<td>0</td>
<td>.</td>
<td id="dengyu">=</td>
<td>/</td>
</tr>
<tr>
<td id="cle">清空</td>
<td id="tg">退格</td>
</tr>
</table>
</div>
</body>
</html>