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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
JavaScript变量声明详解
Nov 27 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 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
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
php时间计算相关问题小结
2016/05/09 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
js图片处理示例代码
2014/05/12 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
如何在Python中编写并发程序
2016/02/27 Python
解决python删除文件的权限错误问题
2018/04/24 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
python日期相关操作实例小结
2019/06/24 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
用python批量下载apk
2020/12/29 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
客服专员岗位职责
2014/02/28 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
python实现图片批量压缩
2021/04/24 Python