zoukankan      html  css  js  c++  java
  • JS之面向对象

    用面向对象方法做一个计算器:

    html代码:

    <style type="text/css">
    table{
    margin: 0 auto;
    text-align: center;
    }
    input{
    100px;
    height: 80px;
    font-size: 60px;
    }
    #sum{
    480px;
    }

    </style>

    <body>
    <table width="500" height="600" border="1" cellpadding="0" cellspacing="2">
    <tr >
    <td colspan="4">
    <input type="text" id="sum"/>
    </td>

    </tr>
    <tr >
    <td><input type="button" value="1" id="num1" name="num"/></td>
    <td><input type="button" value="2" id="num2" name="num"/></td>
    <td><input type="button" value="3" id="num3" name="num"/></td>
    <td><input type="button" value="+" id="fuhao1" name="fuhao"/></td>


    </tr>
    <tr >
    <td><input type="button" value="4" id="num4" name="num"/></td>
    <td><input type="button" value="5" id="num5" name="num"/></td>
    <td><input type="button" value="6" id="num6" name="num"/></td>
    <td><input type="button" value="-" id="fuhao2" name="fuhao"/></td>

    </tr>
    <tr >
    <td><input type="button" value="7" id="num7" name="num"/></td>
    <td><input type="button" value="8" id="num8" name="num"/></td>
    <td><input type="button" value="9" id="num9" name="num"/></td>
    <td><input type="button" value="*" id="fuhao3" name="fuhao"/></td>

    </tr>
    <tr height="100">

    <td> <input type="button" value="0" id="num0" name="num"/></td>
    <td> <input type="button" value="." id="num." name="num"/></td>
    <td> <input type="button" value="=" id="dengyu" name="dengyu"/></td>
    <td> <input type="button" value="/" id="fuhao4" name="fuhao"/></td>

    </tr>
    </table>
    </body>

    <script src="js/counter.js" type="text/javascript" charset="utf-8"></script>

    script代码:

    var counters = {
    num1: 0,
    fuhao: "",
    sum: document.getElementById("sum"),
    getnum: function(num) {
    this.sum.value += num;
    },
    getfuhao: function(fuhao) {
    this.num1 = this.sum.value;
    this.fuhao = fuhao;
    this.sum.value = "";

    },
    getvalue: function() {
    this.sum.value=eval(this.num1+this.fuhao+this.sum.value);

    }
    }

    //点击数字,显示数字
    var objnum = document.getElementsByName('num');
    for(var i = 0; i < objnum.length; i++) {
    objnum.item(i).onclick = function() {
    //alert(this.value);
    counters.getnum(this.value);
    }
    }
    //点击符号,显示符号
    var objfuhao = document.getElementsByName('fuhao');
    for(var j = 0; j < objfuhao.length; j++) {
    objfuhao.item(j).onclick = function() {
    counters.getfuhao(this.value);
    //alert("aa");
    }
    }
    //点击等号,显示结果
    var objvalue = document.getElementById('dengyu');
    objvalue.onclick=function(){
    counters.getvalue();
    //alert('aa');
    }

    无才难做千里马,有志可吞九霄云!
  • 相关阅读:
    161012、JAVA读写文件,如何避免中文乱码
    161011、oracle批量插入数据
    161010、在大型项目中组织CSS
    160930、Javascript的垃圾回收机制与内存管理
    160929、各数据库连接配置与maven依赖安装
    Selenium学习(8) Cookie处理
    Selenium学习(7) 文件上传
    Selenium学习(6) 控制浏览器操作
    Selenium学习(5) 元素等待
    Selenium学习(4) 键盘操作
  • 原文地址:https://www.cnblogs.com/lfvkit/p/6386550.html
Copyright © 2011-2022 走看看