用JS做一个简单的计算器

最新推荐文章于 2020-04-27 10:32:00 发布

didimeng2054

最新推荐文章于 2020-04-27 10:32:00 发布

阅读量189

点赞数

原文链接：http://www.cnblogs.com/xwenbin/p/10027374.html

版权

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

<script>
//定义全局变量
var tds=null;
var jg=null;
var dengyu=null;
var cle=null;
var tg=null;
//window加载完成后执行
window.οnlοad=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].οnclick=function(){//为不带“id”的按键添加点击事件
      jg.innerHTML+=this.innerHTML;//将按键的内容输入到显示区域
      }
    }
//******单独为带id属性的按键设置点击事件*****
dengyu.οnclick=function(){//等于
jg.innerHTML=eval(jg.innerHTML);
}
cle.οnclick=function(){//清空
jg.innerHTML="";
}
tg.οnclick=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>

转载于:https://www.cnblogs.com/xwenbin/p/10027374.html

didimeng2054

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JS做一个简单的计算器

分享一个用JS做简单的计算器的代码，自己写的，马马虎虎下面是代码：<!doctype html><html><head><meta charset="utf-8"><title>计算器</title><style>/*样式随便造，自己看着顺眼就行*/#all{width: 300px; h...
复制链接

扫一扫