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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
js+css在交互上的应用
Jul 18 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 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字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
如何判断php数组的维度
2013/06/10 PHP
PHP生成plist数据的方法
2015/06/16 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
js获取单选按钮的数据
2006/11/27 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
canvas绘制多边形
2017/02/24 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
node.js通过url读取文件
2020/10/16 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
Python科学计算环境推荐——Anaconda
2014/06/30 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
机械制造与自动化应届生求职信
2013/11/16 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
关于环保的演讲稿
2014/05/10 职场文书
多媒体教室标语
2014/06/26 职场文书
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android