用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