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');
    }

    无才难做千里马,有志可吞九霄云!
  • 相关阅读:
    Autodesk Infrastructure Map Server 2012(MapGuide 2012) 最新特性介绍
    MapGuide Fusion Viewer API 如何获取Fusion对象
    MapGuide Fusion viewer中如何用Google Map/Yahoo Map/Bing Map做底图
    Visual Studio 2010开发AutoCAD 2012 .net 应用程序调试时断点不起作用
    MapGuide 用户调查关于RFC 111 Subversion
    MapGuide Enterprise 2011 授权错误的解决办法
    AutoCAD的定制开发接口(高级篇)专题培训材料介绍[转载]
    【转】Autodesk实验室从照片进行三维建模
    AutoCAD 2012最新特性概览
    Autodesk Map 3D 2012 新功能介绍
  • 原文地址:https://www.cnblogs.com/lfvkit/p/6386550.html
Copyright © 2011-2022 走看看