JavaScript经典案例之简易计算器

本文实例为大家分享了Javascript实现简易计算器的具体代码，供大家参考，具体内容如下

效果图：

逻辑：

1、首先通过遍历，为所有元素添加事件； 2、各个按钮功能分别实现

 
 
 


 .one {
 width: 50px;
 height: 50px;
 background: #f60;
 display: inline-block;
 line-height: 50px;
 color: #fff;
 margin: 5px 5px 5px 0;
 font-size: 23px;
 text-align: center;
 cursor: pointer;
 }

 .two {
 width: 112px;
 height: 50px;
 background: #f60;
 color: #fff;
 font-size: 23px;
 display: inline-block;
 margin-top: 5px;
 text-align: center;
 line-height: 50px;
 cursor: pointer;

 }

 .tools {
 background: blue;
 cursor: pointer;

 }

 .cal {
 height: 100px;
 position: relative;
 background: #999;
 width: 228px;
 color: #fff;
 font-size: 23px;
 cursor: pointer;


 }

 .cal_content {
 position: absolute;
 bottom: 10px;
 right: 10px;
 word-break: normal;
 cursor: pointer;

 }



 
 
  0
 
 
  *
  /
  CE
  AC
 
 
  7
  8
  9
  +
 
 
   4
  5
  6
  -
  
 
 
  1
  2
  3
  .
 
 
  0
  =
 
 

总计：

1、通过对象点击将元素的值链接在一起，最后通过**eval()函数**进行计算，将最终结果反馈到显示区域
2、设置一个全局表变量 *var caltext = ‘'; * 存放计算字符串
3、ondoucument.onkeyup = function(){ //代码 } 键盘事件

更多计算器功能实现，请点击专题： 计算器功能汇总 进行学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。