Javascript实现基本运算器


Posted in Javascript onJuly 15, 2017

用Javascript实现一个基本的运算器,具体内容如下

使用表格布局,JS添加事件

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>计算器</title>
</head>
<style>
 *{
  margin: 0;
  padding: 0;
 }
 table{
  width:400px;
  height: 600px;
  border-collapse: collapse;
  margin: auto;
 }
 .trr{
  width: 400px;
  height: 100px;
 }
 .trr1{
  width: 400px;
  height: 50px;
 }
 .tdd{ width: 100px;
  height: 100px;
  border: 1px solid silver;
  text-align: center;
  line-height: 100px;

 }
 .btn{
  width: 100%;
  height: 100%;
  font-size: 2.5em;
 }
 .btn1{
  width: 100%;
  height: 100%;
  font-size: 2.5em;
 }
 .tdd1{
  width: 100px;
  height: 50px;
 }
 .text{
  height: 100%;
  font-size: 2.5em;
  text-align: right;
 }

</style>
<body>
<table>

 <tr class="trr text1">
  <td class="tdd" colspan="4"><input class="text" type="text" disabled value="0" /></td>
 </tr>

 <tr class="trr1">
  <td class="tdd1" colspan="2"><input class="btn1 btn" type="button" value="c"/></td>
  <td class="tdd1" colspan="2"><input class="btn1 btn" type="button" value="d"/></td>
 </tr>

 <tr class="trr">
  <td class="tdd"><input class="btn" type="button" value="7"/></td>
  <td class="tdd"><input class="btn" type="button" value="8"/></td>
  <td class="tdd"><input class="btn" type="button" value="9"/></td>
  <td class="tdd"><input class="btn" type="button" value="/"/></td>
 </tr>

 <tr class="trr">
  <td class="tdd"><input class="btn" type="button" value="4"/></td>
  <td class="tdd"><input class="btn" type="button" value="5"/></td>
  <td class="tdd"><input class="btn" type="button" value="6"/></td>
  <td class="tdd"><input class="btn" type="button" value="*"/></td>
 </tr>

 <tr class="trr">
  <td class="tdd"><input class="btn" type="button" value="1"/></td>
  <td class="tdd"><input class="btn" type="button" value="2"/></td>
  <td class="tdd"><input class="btn" type="button" value="3"/></td>
  <td class="tdd"><input class="btn" type="button" value="-"/></td>
 </tr>

 <tr class="trr">
  <td class="tdd"><input class="btn" type="button" value="0"/></td>
  <td class="tdd"><input class="btn" type="button" value="."/></td>
  <td class="tdd"><input class="btn" type="button" value="+"/></td>
  <td class="tdd"><input class="btn" type="button" value="="/></td>
 </tr>
</table>
<script>
 var obtn=document.getElementsByClassName("btn");
 var otext=document.getElementsByClassName("text")[0];
 var arr=[];//定义一个数组,向其中存入数字和运算符。

 for(var i=0;i<obtn.length;i++){
  obtn[i].onclick= function () { 
   if(!isNaN(this.value)||this.value=="."){ //this:代表鼠标点击的obtn
     if(otext.value.indexOf(".")==-1){ //消除重复"."的BUG  
      if(otext.value.length==0){ 
      if(this.value!="0"){       //----------------------
       otext.value+=this.value;     //|
      }            //|
      }            //|
      else if(otext.value.length==1&&otext.value=="0"){//|
      otext.value=this.value;      //|
      }            //|
      else if(otext.value.length==1&&otext.value!="0"){//初始状态时,若计算器屏幕为"0",
      otext.value+=this.value;      //实现输入一个非零数字的时候,计算器
      }            //上的数值替换为输入的非零值
      else if(otext.value.length>1){     //|
       otext.value+=this.value;      //|
      }            //--------------------
     }
     else
     {
      if(this.value!="."){ //消除重复"."的BUG
       if(otext.value.length==0){
        if(obtn[i].value!="0"){
        otext.value+=this.value;
       }
       }
       if(otext.value.length>=1){
        otext.value+=this.value;
       }            
      }
     }
   }
   if(this.value=="/"||this.value=="*"||this.value=="+"||this.value=="-"){


    if(otext.value!="0"&&otext.value!=""&&otext.value!="-"){ 
              //消除输入重复运算符的BUG,
     arr[arr.length]=otext.value;  //当输入一个运算符的时候,otext内的value值
     arr[arr.length]=this.value;   //为""(空),所以判断条件为若otext内的value值不为空
     otext.value="";      //则向数字中传值。
    }          //此时出现无法输入负数值运算的BUG


    else if(otext.value==""&&this.value=="-"){ //消除无法输入负数值运算的BUG
     otext.value=this.value;    //当点击运算符后otext的value值为空,
    }           //此时判断若this的值为"-",就替换进去。
    else if(otext.value=="0"&&this.value=="-"){//此时出现无法执行类似"3--3"的双减法运算BUG,
     otext.value=this.value;    //因为eval()无法识别有双减的字符串值。
    }           //若初始时,otext值为"0",并且this的值为
   }            //"-",则用"-"替换otext中的值。



   if(this.value=="="){
    if(otext.value.length>=1){      //--------------------
     var string="";        //|
      if(arr[arr.length-1]=="-"&&otext.value<0){ //→消除无法执行类似"3--3"的双减法运算的BUG
      arr[arr.length-1]="+";     //→当输入负数值的时候,判断arr数组中的
      otext.value=Math.abs(otext.value);  //→末尾值是否为"-",若为"-"则把其改为"+",
      }           //→并且让otext.value值取绝对值。
     arr[arr.length]=otext.value;     //|
     for(var i=0;i<arr.length;i++){    //|
      string+=arr[i];       //|
     }           //|把存入数组中的数字和运算符遍历存储到一个字符串中,
     otext.value=eval(string);     //|直接使用eval()方法就可以识别一个的字符串,执行
     arr=[];          //|该字符串中的运算
    }            //|
   }             //---------------------
   if(this.value=="c"){
    otext.value="0";
    arr=[];
   }
   if(this.value=="d"){
    otext.value=otext.value.substr(0,otext.value.length-1);//每一次删除otext中的末尾值
    if(otext.value==""){         //当把otext中的值删除完后,给
     otext.value="0";         //otext复值"0".
    }
   }
  }
 }
</script>
</body>
</html>

Javascript实现基本运算器

计算器的”c”功能为清屏;”d”功能为删除一个数;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 #Javascript
Javascript实现时间倒计时效果
Jul 15 #Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 #Javascript
JavaScript实现时间表动态效果
Jul 15 #Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 #Javascript
JavaScript实现三级联动效果
Jul 15 #Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 #Javascript
You might like
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
建龙钢铁面试总结
2014/04/15 面试题
信息技术专业个人自我评价
2013/12/11 职场文书
简历中的自我评价范文
2014/02/05 职场文书
老师的检讨书
2014/02/23 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
万能检讨书2000字
2014/10/17 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
董事长年会致辞
2015/07/29 职场文书
污染环境建议书
2015/09/14 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js