手记

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程
继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持，我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

天气晴好 2016-09-19 02:06:54 浏览 4384
天气晴好
关注TA
已关注
手记 2
粉丝 4
获赞 90

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

自学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>

计算器

打开App，阅读手记
相关标签
JavaScript
测试
34人推荐
发表评论
随时随地看视频慕课网APP

热门评论

厉害👍！有没什么学习经验！或好的教材！

好厉害，一个月学成这样

你的加法错了   你看看你测试一下

查看全部评论

相关课程

微信小程序入门与实战（全新版） 超20000人学习的好课

¥149 初级 23861

纯正商业级微信小程序应用实战，全方位小程序特性讲解

¥366 中级 4742

一天时间高效准备前端技术一面 匹配大厂面试要求

¥299 初级 4677

JavaScript入门篇

免费 入门 739760

JavaScript进阶篇

免费 入门 468047

Python Web全栈工程师

¥2999 120

相关阅读

测试框架 Mocha 实例教程
http缓存优先级问题。
测试测试
测试
前端自动化测试（一）