用JS做一個簡單的計算器


分享一個用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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM