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 相关文章推荐
js中的json对象详细介绍
Oct 29 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 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日期时间函数的高级应用技巧
2009/05/16 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
php实现的生成排列算法示例
2019/07/25 PHP
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
Python的Django框架中的数据过滤功能
2015/07/17 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
立志成才演讲稿
2014/09/04 职场文书
师范生见习报告范文
2014/11/03 职场文书
2015年实习单位评语
2015/03/25 职场文书
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技
德生2P3收音机开箱评测
2022/04/30 无线电
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技