您正在使用IPV4(3.236.253.192)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情       【腾讯云】云产品限时秒杀,爆款1核2G云服务      
虚位以待
2021年 冬至节 56
2021年 圣诞节 60
2022年 元 旦 67
2022年 春 节 98
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    js版实现计算器功能
    内容摘要: !DOCTYPEhtmlhtmlheadlang='en'metacharset='UTF-8'title计算器/titlestyle*{padding:0;margin:0;}table{width:400px;margin:auto;border:1pxsolidsilver;border-collapse:collapse;/*列与列的间距*/}td{......
    <!DOCTYPEhtml>

    <html>

    <headlang="en">

    <metacharset="UTF-8">

    <title>计算器</title>

    <style>

    *{

    padding:0;

    margin:0;

    }

    table{

    width:400px;

    margin:auto;

    border:1pxsolidsilver;

    border-collapse:collapse;/*列与列的间距*/

    }

    td{

    width:100px;

    border:1pxsolid#525252;

    }

    tdinput{

    width:98.7%;

    height:60px;

    outline:none;

    text-align:right;

    font-size:20px;

    background:rgba(251,255,227,0.81);

    }

    tdbutton{

    width:100%;

    height:60px;

    font-size:22px;

    background:rgba(223,255,243,0.81);

    }

    </style>

    </head>

    <body>

    <table>

    <tr>

    <tdcolspan="4"><inputid="text"type="text"value="0"/></td>

    </tr>

    <tr>

    <tdcolspan="2"><buttonclass="btn">del</button></td>

    <tdcolspan="2"><buttonclass="btn">c</button></td>

    </tr>

    <tr>

    <td><buttonclass="btn">9</button></td>

    <td><buttonclass="btn">8</button></td>

    <td><buttonclass="btn">7</button></td>

    <td><buttonclass="btn">+</button></td>

    </tr>

    <tr>

    <td><buttonclass="btn">6</button></td>

    <td><buttonclass="btn">5</button></td>

    <td><buttonclass="btn">4</button></td>

    <td><buttonclass="btn">-</button></td>

    </tr>

    <tr>

    <td><buttonclass="btn">3</button></td>

    <td><buttonclass="btn">2</button></td>

    <td><buttonclass="btn">1</button></td>

    <td><buttonclass="btn">*</button></td>

    </tr>

    <tr>

    <td><buttonclass="btn">0</button></td>

    <td><buttonclass="btn">.</button></td>

    <td><buttonclass="btn">=</button></td>

    <td><buttonclass="btn">/</button></td>

    </tr>

    </table>

    <!--<spanid="m">8</span>-->

    <script>

    /*varM=document.getElementById("m");


    console.log(M.innerHTML);

    console.log(M.innerText);*/

    //获取按钮

    varbuttonal=document.getElementsByClassName("btn");

    vartextal=document.getElementById("text");

    varres=[];//定义一个数组存储输入的值

    varlabel=false;

    for(vari=0;i<buttonal.length;i++){

    buttonal[i].onclick=addclick;

    functionaddclick(){

    //输入为数字或者为“.”

    if(!isNaN(this.innerHTML)||this.innerHTML=="."){

    //文本框初值不为0

    label=true;

    if(textal.value!=="0"){

    //文本框中含有“.”

    if(textal.value.indexOf(".")!==-1){

    //处理点重复的问题文本框里面有点不上去点(用户按的数字得加用户按的是点不加)

    //输入"."时

    if(this.innerHTML!=="."){

    textal.value+=this.innerHTML;

    }

    }

    else{

    textal.value+=this.innerHTML;

    }

    }

    //文本框初值为0

    else{

    if(this.innerHTML=="."){

    textal.value="0"+this.innerHTML;

    }

    else{

    textal.value=this.innerHTML;

    }

    }

    }

    //非数字

    else{

    switch(this.innerHTML){

    case"+":save(this);

    break;

    case"-":save(this);

    break;

    case"/":save(this);

    break;

    case"*":save(this);

    break;

    case"=":

    res.push(textal.value);

    varresult=eval(res.join(""));

    if(result=="Infinity"){

    remove_add("remove");

    }

    textal.value=result==Infinity?"除数不能为零":result;

    //console.log(res.join(""));

    res=[];

    break;

    case"del":

    //从后往前一个一个的减数字substr(start,count)substring(start,end)end不取

    textal.value=textal.value.length==1?"0":textal.value.substr(0,textal.value.length-1);

    break;

    case"c":

    textal.value="0";

    res=[];

    remove_add("add");

    break;

    }

    }

    }

    }

    functionsave(mini){

    //清屏之前存储用户按的值

    //确认一个条件用户是连续按符号还是数字+符号

    if(!label){//连续两次按符号时

    res[res.length-1]=mini.innerHTML;//第二次按的符号替代第一次的

    }

    else{

    res.push(textal.value);

    res.push(mini.innerHTML);

    }

    textal.value="0";

    label=false;

    }


    //卸载除c以外的所有元素的事件

    functionremove_add(p){

    for(vari=0;i<buttonal.length;i++){

    if(p=="add"){

    buttonal[i].onclick=addclick;

    }

    else{

    if(buttonal[i].innerHTML!="c"){

    buttonal[i].onclick=null;

    }

    }

    }

    }


    </script>

    </body>

    </html>

    版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
    上一篇:HTML 罗盘式时钟的实现 下一篇:js实现拖动滑块效果
    发布日期:2021/9/21
    手机扫二维码直达本页
    发布时间:11:03:29
    点击:356
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS 6.0.6.10688 Build 21.10.13(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021