js写计算器实现加减乘除效果

来源：互联网发布：快消行业数据分析编辑：程序博客网时间：2024/04/25 17:59
点击试用
效果图：
这里写图片描述
<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style type="text/css">            *{margin: 0;padding: 0;}            .cal{width: 500px;height: 300px;background-color: brown;margin: 50px auto;cursor: pointer;}            #he{width: 500px;height: 57px;border-bottom: 3px solid #fff;float: left;font-size: 30px;line-height: 57px;color: white;}            th{width: 115px;height:53px;border: 2px solid#FFFFFF;color: white;}            th:hover{font-size:25px;transition: all 0.5s;color: yellow;}            #cheng{float: right;width: 130px;height: 235px;margin-top: -288px;margin-right: 3px;}            #cheng button{width: 130px;height: 47px;margin-top: 1px;}        </style>    </head>    <body>        <div class="cal">            <div id="he"></div>            <table>                <tr>                    <th>7</th>                    <th>8</th>                    <th>9</th>                </tr>                <tr>                    <th>4</th>                    <th>5</th>                    <th>6</th>                </tr>                <tr>                    <th>1</th>                    <th>2</th>                    <th>3</th>                </tr>                <tr>                    <th>0</th>                    <th id="dian">.</th>                    <th id="del">del</th>                </tr>            </table>            <div id="cheng">                <button id="clear">←</button>                <button>/</button>                <button>*</button>                <button>+</button>                <button>-</button>                <button>=</button>            </div>        </div>    </body><script type="text/javascript">var th=document.getElementsByTagName("th")var he=document.getElementById("he")var but=document.getElementById("cheng").getElementsByTagName("button")var dian=document.getElementById("dian")var del=document.getElementById('del')var clear=document.getElementById("clear")//加减乘除开关var click=true;  //点开关var point=true;  //0.开关var num=true;//数字开关var dig=true;   for(var i=0;i<th.length-2;i++){      th[i].onclick=function(){        //如果dig=true及开关打开  数字按键输入有效        if(dig){            //模拟显示屏数字拼接            he.innerHTML=he.innerHTML+this.innerHTML;                //点击数字之后，打开加减乘除开关 关闭0.开关                click=true;                num=false;         }           }    }  dian.onclick=function(){    //如果point开关打开，point按键有效    if(point){        //如果显示屏内容为空，点击 . 显示0.         if(he.innerHTML.length==0){            he.innerHTML="0.";            //0.之后加减乘除开关关闭及0.之后不能直接参与运算            click=false;         }else{            //如果显示屏内容不为空 并且0.开关打开 点击显示0.            if (num) {                he.innerHTML=he.innerHTML+"0.";                //加减乘除开关关闭                click=false;            } else{                //如果显示屏内容不为空 并且0.开关没有打开 点击.正常拼接                he.innerHTML=he.innerHTML+this.innerHTML;            }               // 数字运算符输入完毕将加减乘除开关打开                click=true;         }        }    //每次操作完将point开关关闭     point=false;  }  //遍历所有button开关   for(var j=0;j<but.length;j++){      but[j].onclick=function(){        //判断加减乘除开关是否打开        if(click){            if (this.innerHTML=="=") {                //点击等号并且显示屏有内容                if(he.innerHTML.length>0){                    //求值 加减乘除开关打开 数字开关和点开关关闭                    he.innerHTML=eval(he.innerHTML)                     click=true;                     dig=false;                     point=false;                  }else{                    //显示屏内容为空 点击=号依然为空，并打开数字和点开关                    he.innerHTML="";                    dig=true;                    point=true;                  }           }else{             //如果点击的是+-*/运算符并且显示屏内容为空 就在运算符前+0显示             if(he.innerHTML.length==0){                    he.innerHTML=he.innerHTML+0+this.innerHTML                }else{                    //显示屏有内容就进行内容拼接                    he.innerHTML=he.innerHTML+this.innerHTML                }                //运算符点击后 关闭运算符开关 打开点和数字开关            click=false;            point=true;            dig=true;        }        }        //运算符点击之后打开0.开关        num=true;      }   } del.onclick=function(){    //点击del清空显示屏 所有开关重置    he.innerHTML="";      point=true;      click=true;       dig=true;      num=true;    } clear.onclick=function(){    //每点击clear一次消除显示屏length的最后一个值      he.innerHTML=he.innerHTML.substring(0,he.innerHTML.length-1) }</script></html>
简单开关控制逻辑：
这里写图片描述

深层次的bug未作探究
阅读全文
0 0