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

点击试用
效果图:
js写计算器实现加减乘除效果_第1张图片
js写计算器实现加减乘除效果_第2张图片
js写计算器实现加减乘除效果_第3张图片


<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>7th>
                    <th>8th>
                    <th>9th>
                tr>
                <tr>
                    <th>4th>
                    <th>5th>
                    <th>6th>
                tr>
                <tr>
                    <th>1th>
                    <th>2th>
                    <th>3th>
                tr>
                <tr>
                    <th>0th>
                    <th id="dian">.th>
                    <th id="del">delth>
                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;i2;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;jfunction(){
        //判断加减乘除开关是否打开
        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>

简单开关控制逻辑:
js写计算器实现加减乘除效果_第4张图片
js写计算器实现加减乘除效果_第5张图片
深层次的bug未作探究

你可能感兴趣的:(web前端小项目,web前端javascript)