Javascript实现基本运算器

网络编程 2025/10/25 佚名

3 2 1

用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>

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

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

js,运算器

标签：

js,运算器

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

白云城资源网 Copyright www.dyhadc.com

评论“Javascript实现基本运算器”

Javascript实现基本运算器

暂无“Javascript实现基本运算器”评论...

www.dyhadc.com 白云城资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

Javascript实现基本运算器

js,运算器

JavaScript实现跟随滚动缓冲运动广告框

基于AngularJS的拖拽文件上传的实例代码

评论“Javascript实现基本运算器”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

Javascript实现基本运算器

js,运算器

JavaScript实现跟随滚动缓冲运动广告框

基于AngularJS的拖拽文件上传的实例代码

评论“Javascript实现基本运算器”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存