为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 新鲜小白自写计算器，自己眼馋，三个小时写成。刚更新，欢...

新鲜小白自写计算器，自己眼馋，三个小时写成。刚更新，欢迎测试。

标签：
JavaScript 测试

搭建了博客，大家有时间去看看。
阿杰博客

自学Javascript一个月左右，没有系统学习过，所以都是看到什么就想写着玩玩。
纯粹就是写着玩，没有优化，写了2小时左右，够慢的了，没有美化，只有表格几个框框，
关于1.1版本说明：
1.1版本是我第二天自己再看看时，发现当算出1+1为2之后再次按等号键，竟然不直接加被加数了，所以自己继续修改下。自己没发现有什么其他bug
欢迎大家指正。
没有美化。其实在第二天就修改好的，没有发出来是因为：
一来，我现在需要照看儿子；二呢，就是我自己写了下拖放，火狐下event事件没搞明白，想了想那个。还有看网上写的拖放的面向对象编程，对面向对象编程有了新的了解；还有由于是自学没有那么的条理性，都是想到什么学什么，现在总算是入门了。
这个计算器可以修改成面向对象的，但是 好绕的，感觉晕晕乎乎的，不如面向过程的清晰。
不怕你们笑话，我去年自学过十几天的易语言，在那个时候对编程不是很清晰的，后来没事的时候就像一些编程的一些东西，对编程有了一个面向过程的认识。所以学习JS感觉还可以，就是从面向过程编程到面向对象编程的转换，这里有点难度。
关于1.0版本的说明：
1.0版本是我晚上看别人做自己想自己也做一个，所以比较粗糙，而且是匆忙写出来的所以有些地方不怎么好。

1.1版本

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
        #con{height: 500px;width: 400px;margin: 0 auto;}
        #con span{display: block;width: 380px;margin: 0 auto;border:1px solid #000;line-height: 40px;font-size: 2em;text-align: right;}
        #tab{width: 380px;height: 380px;margin: 0 auto;font-size: 2em;text-align: center;margin-top: 20px;}
        #tab td {border: 1px dashed #000000;cursor: pointer;}
        #tab tr{padding: 0;}

    </style>
</head>
<body>
<h1>计算器</h1>
<div id="con">
    <span>0</span>
    <table id="tab">
        <tbody>
        <tr>
            <td>７</td>
            <td>８</td>
            <td>９</td>
            <td>÷</td>
            <td>AC</td>
        </tr>
        <tr>
            <td>４</td>
            <td>５</td>
            <td>６</td>
            <td>ｘ</td>
            <td>√</td>
        </tr>
        <tr>
            <td>１</td>
            <td>２</td>
            <td>３</td>
            <td>－</td>
            <td rowspan="2">=</td>
        </tr>
        <tr>
            <td colspan="2">0</td>
            <td>.</td>
            <td>＋</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script>
    var otd=document.getElementsByTagName('td'),os=document.getElementsByTagName('span')[0],a,b,c,d;

    otd[0].xx='7';
    otd[1].xx='8';
    otd[2].xx='9';
    otd[3].xx='/';
    otd[4].xx='ac';
    otd[5].xx='4';
    otd[6].xx='5';
    otd[7].xx='6';
    otd[8].xx='*';
    otd[9].xx='cc';
    otd[10].xx='1';
    otd[11].xx='2';
    otd[12].xx='3';
    otd[13].xx='-';
    otd[14].xx='=';
    otd[15].xx='0';
    otd[16].xx='.';
    otd[17].xx='+';

    for(var i=0;i<otd.length;i++){

        otd[i].onclick=function () {
            if (this.xx=='ac'){
                os.innerHTML=0;a=0;b=0;otd[14].cc='';c=0;otd[14].ccx=0;
            }else if((isNaN(os.innerHTML) && !/[^x]+/g.test(os.innerHTML)) os.innerHTML=='Infinity'  os.innerHTML=='被除数不能为0'){
                if(this.xx!='ac'){
                    alert('出现错误，已帮你重置计算器。');
                }
                os.innerHTML=0;a=0;b=0;otd[14].cc='';c=0;otd[14].ccx=0;
            }else if(this.xx=='/'){
                if(otd[14].cx==0){otd[14].onclick();}
                if (/[x]+/g.test(os.innerHTML)){
                    a=c;
                }else {
                    a=os.innerHTML;
                }
                otd[14].cc=this.xx;
                otd[14].ccx=1;          // 标记有没有按加减乘除？，
                otd[14].cx=0;           // 清除等号状态，，
                console.log(otd[14].cc);
            }else if(this.xx=='*'){
                if(otd[14].cx==0){otd[14].onclick();}
                if (/[x]+/g.test(os.innerHTML)){
                    a=c;
                }else {
                    a=os.innerHTML;
                }
                otd[14].cc=this.xx;
                otd[14].ccx=1;          // 标记有没有按加减乘除？，
                otd[14].cx=0;           // 清除等号状态，，
                console.log(otd[14].cc);
            }else if(this.xx=='-'){
                if(otd[14].cx==0){otd[14].onclick();}
                if (/[x]+/g.test(os.innerHTML)){
                    a=c;
                }else {
                    a=os.innerHTML;
                }
                otd[14].cc=this.xx;
                otd[14].ccx=1;          // 标记加减乘除，
                otd[14].cx=0;           // 清除等号状态，，
                console.log(otd[14].cc);
            }else if(this.xx=='+'){
                if(otd[14].cx==0){otd[14].onclick();}
                if (/[x]+/g.test(os.innerHTML)){
                    a=c;
                }else {
                    a=os.innerHTML;
                }
                otd[14].cc=this.xx;
                otd[14].ccx=1;          // 标记有没有按加减乘除？，
                otd[14].cx=0;           // 清除等号状态，，
                console.log(otd[14].cc);
            }else if(this.xx=='='){
                console.log(this.cc);
                if (this.cx==0){        //判断等号状态是不是0
                    b=os.innerHTML;
                }else if (/[x]+/g.test(os.innerHTML)){
                    a=c;
                }else {
                    a=os.innerHTML;
                }
                this.cx++;          //等号状态一直往上加，
                this.ccx=0;         //清除加减乘除状态，
                console.log(a+this.cc+b);
                if (this.cc=='+'){
                    d=os.innerHTML;
                    os.innerHTML=parseFloat(a)+parseFloat(b);
                    if (/e/.test(os.innerHTML)){
                        c=os.innerHTML;
                        os.innerHTML=os.innerHTML.replace(/e/,'x10的');
                        os.innerHTML+='次方';
                    }
                }else if(this.cc=='-'){
                    os.innerHTML=a-b;
                    d=os.innerHTML;
                    if (/e/.test(os.innerHTML)){
                        c=os.innerHTML;
                        os.innerHTML=os.innerHTML.replace(/e/,'x10的');
                        os.innerHTML+='次方';
                    }
                }else if(this.cc=='*'){
                    os.innerHTML=a*b;
                    d=os.innerHTML;
                    if (/e/.test(os.innerHTML)){
                        c=os.innerHTML;
                        os.innerHTML=os.innerHTML.replace(/e/,'x10的');
                        os.innerHTML+='次方';
                    }
                }else if(this.cc=='/'){
                    if (b==0){
                        os.innerHTML='被除数不能为0'
                    }else {
                        os.innerHTML=a/b;
                        d=os.innerHTML;
                        if (/e/.test(os.innerHTML)){
                            c=os.innerHTML;
                            os.innerHTML=os.innerHTML.replace(/e/,'x10的');
                            os.innerHTML+='次方';
                        }
                    }
                }

            }else if(this.xx=='cc'){
                os.innerHTML=Math.sqrt(os.innerHTML);
            }else {
                if (otd[14].cx!=0){   //判断等号状态，
                    os.innerHTML=0; //  输入框重置，
                    otd[14].cx=0;   // 清除等号状态，，
                    otd[14].cc='';
                    otd[14].ccx=1;
                }else if(otd[14].ccx==1){         //判断加减乘除状态，
                    os.innerHTML=0;     //  输入框重置，
                    otd[14].ccx=0;      //清除掉加减乘除状态，
                }
                os.innerHTML+=this.xx;

                if (this.xx!='.'){      //判断小数点，
                    os.innerHTML=parseFloat(os.innerHTML);
                }else if(os.innerHTML.match(/[.]/g).length>1){
                    os.innerHTML=parseFloat(os.innerHTML);
                }
            }
        }

    }
</script>
</html>

1.0版

图片描述

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
        #con{height: 500px;width: 400px;margin: 0 auto;}
        #con span{display: block;width: 380px;margin: 0 auto;border:1px solid #000;line-height: 40px;font-size: 2em;text-align: right;}
        #tab{width: 380px;height: 380px;margin: 0 auto;font-size: 2em;text-align: center;margin-top: 20px;}
        #tab td {border: 1px dashed #000000;cursor: pointer;}
        #tab tr{padding: 0;}

    </style>
</head>
<body>
<h1>计算器</h1>
<div id="con">
    <span>0</span>
    <table id="tab">
        <tbody>
        <tr>
            <td>７</td>
            <td>８</td>
            <td>９</td>
            <td>÷</td>
            <td>AC</td>
        </tr>
        <tr>
            <td>４</td>
            <td>５</td>
            <td>６</td>
            <td>ｘ</td>
            <td>√</td>
        </tr>
        <tr>
            <td>１</td>
            <td>２</td>
            <td>３</td>
            <td>－</td>
            <td rowspan="2">=</td>
        </tr>
        <tr>
            <td colspan="2">0</td>
            <td>.</td>
            <td>＋</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script>
    var otd=document.getElementsByTagName('td'),os=document.getElementsByTagName('span')[0],a,b,c;

    otd[0].xx='7';
    otd[1].xx='8';
    otd[2].xx='9';
    otd[3].xx='/';
    otd[4].xx='ac';
    otd[5].xx='4';
    otd[6].xx='5';
    otd[7].xx='6';
    otd[8].xx='*';
    otd[9].xx='cc';
    otd[10].xx='1';
    otd[11].xx='2';
    otd[12].xx='3';
    otd[13].xx='-';
    otd[14].xx='=';
    otd[15].xx='0';
    otd[16].xx='.';
    otd[17].xx='+';

    for(var i=0;i<otd.length;i++){

        otd[i].onclick=function () {
            if (this.xx=='ac'){
                os.innerHTML=0;a=0;b=0;otd[14].cc='';
            }else if(this.xx=='/'){
                a=os.innerHTML;
                otd[14].cc=this.xx;
                otd[14].ccx=1;          // 标记有没有按加减乘除？，
                otd[14].cx=0;           // 清除等号状态，，
                console.log(otd[14].cc);
            }else if(this.xx=='*'){
                a=os.innerHTML;
                otd[14].cc=this.xx;
                otd[14].ccx=1;          // 标记有没有按加减乘除？，
                otd[14].cx=0;           // 清除等号状态，，
                console.log(otd[14].cc);
            }else if(this.xx=='-'){
                a=os.innerHTML;
                otd[14].cc=this.xx;
                otd[14].ccx=1;          // 标记有没有按加减乘除？，
                otd[14].cx=0;           // 清除等号状态，，
                console.log(otd[14].cc);
            }else if(this.xx=='+'){
                a=os.innerHTML;
                otd[14].cc=this.xx;
                otd[14].ccx=1;          // 标记有没有按加减乘除？，
                otd[14].cx=0;           // 清除等号状态，，
                console.log(otd[14].cc);
            }else if(this.xx=='='){
                console.log(this.cc);
                if (this.cx==0){        //判断等号状态是不是0
                    b=os.innerHTML;
                }else if (/[x]+/g.test(os.innerHTML)){
                    console.log(c+'ggg'+a);
                    a=c;
                }else {
                    a=os.innerHTML;
                }
                this.cx++;          //等号状态一直往上加，
                this.ccx=0;         //清除加减乘除状态，
                console.log(a+this.cc+b);
                if (this.cc=='+'){
                    os.innerHTML=parseFloat(a)+b;
                    if (/e/.test(os.innerHTML)){
                        c=os.innerHTML;
                        os.innerHTML=os.innerHTML.replace(/e/,'x10的');
                        os.innerHTML+='次方';
                    }
                }else if(this.cc=='-'){
                    os.innerHTML=a-b;
                    if (/e/.test(os.innerHTML)){
                        c=os.innerHTML;
                        os.innerHTML=os.innerHTML.replace(/e/,'x10的');
                        os.innerHTML+='次方';
                    }
                }else if(this.cc=='*'){
                    os.innerHTML=a*b;
                    if (/e/.test(os.innerHTML)){
                        c=os.innerHTML;
                        os.innerHTML=os.innerHTML.replace(/e/,'x10的');
                        os.innerHTML+='次方';
                    }
                }else if(this.cc=='/'){
                    if (b==0){
                        os.innerHTML='被除数不能为0'
                    }else {
                        os.innerHTML=a/b;
                        if (/e/.test(os.innerHTML)){
                            c=os.innerHTML;
                            os.innerHTML=os.innerHTML.replace(/e/,'x10的');
                            os.innerHTML+='次方';
                        }
                    }
                }

            }else if(this.xx=='cc'){
                os.innerHTML=Math.sqrt(os.innerHTML);
            }else {
                if (otd[14].cx!=0){
                    os.innerHTML=0; //  输入框重置，
                    otd[14].cx=0;   // 清除等号状态，，
                    otd[14].cc='';
                    otd[14].ccx=1;  
                }else if(otd[14].ccx==1){   //判断加减乘除状态，
                    os.innerHTML=0;     //  输入框重置，
                    otd[14].ccx=0;      //清除掉加减乘除状态，
                }
                os.innerHTML+=this.xx;
                
                if (this.xx!='.'){      //判断小数点，
                    os.innerHTML=parseFloat(os.innerHTML);
                }else if(os.innerHTML.match(/[.]/g).length>1){
                    os.innerHTML=parseFloat(os.innerHTML);
                }
            }
        }

    }
</script>
</html>

计算器

点击查看更多内容
发表于 2016.09.19 02:06， 共 4409 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
34人点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

天气晴好

PHP开发工程师
手记
篇
粉丝
4
获赞与收藏
90

关注作者，订阅最新文章

阅读免费教程

感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消