zoukankan      html  css  js  c++  java
  • JavaScript简单的面向对象

    JavaScript允许你模仿其他语言的编程模式和惯用法。它也形成了自己的一些变成模式和惯用法。那些较为传统的服务器语言具有的面向对象的特性,JavaScript都有。

         下面列举几种简单的JavaScript面向对象的例子来实现一个简单的计时器。

         所有例子共用此Html  ,各个例子main.js

    <!DOCTYPE html>
    <html>
    
    <head>
        <title>Demo-01</title>
        <script src="./main.js"></script>
    </head>
    
    <body>
        <button onclick="Test1()">开始计时</button>
        <div class="time">
            <span id="t_d">00天</span>
            <span id="t_h">00时</span>
            <span id="t_m">00分</span>
            <span id="t_s">00秒</span>
        </div>
    
        <button onclick="Test2()">结束计时</button>
    </body>
    
    </html>
    

      1.方法一

     function GetRTime() {
         var EndTime = new Date('2017/01/20 00:00:00');
         var NowTime = new Date();
         var t = Math.abs(EndTime.getTime() - NowTime.getTime());
         var d = 0;
         var h = 0;
         var m = 0;
         var s = 0;
         if (t >= 0) {
             d = Math.floor(t / 1000 / 60 / 60 / 24);
             h = Math.floor(t / 1000 / 60 / 60 % 24);
             m = Math.floor(t / 1000 / 60 % 60);
             s = Math.floor(t / 1000 % 60);
         }
         document.getElementById("t_d").innerHTML = d + "天";
         document.getElementById("t_h").innerHTML = h + "时";
         document.getElementById("t_m").innerHTML = m + "分";
         document.getElementById("t_s").innerHTML = s + "秒";
     }
     //setInterval(GetRTime, 0);
     var main = function() {
    
     }
     var timer1;
     main.prototype.start = function() {
         timer1 = setInterval(GetRTime, 0);
     }
     main.prototype.stop = function() {
         window.clearInterval(timer1)
     }
     var Test1 = function() {
         var b = new main();
         b.start();
     }
     var Test2 = function() {
         var b = new main();
         b.stop();
     }
    

      2.方法二

     function GetRTime() {
         var EndTime = new Date('2017/01/20 00:00:00');
         var NowTime = new Date();
         var t = Math.abs(EndTime.getTime() - NowTime.getTime());
         var d = 0;
         var h = 0;
         var m = 0;
         var s = 0;
         if (t >= 0) {
             d = Math.floor(t / 1000 / 60 / 60 / 24);
             h = Math.floor(t / 1000 / 60 / 60 % 24);
             m = Math.floor(t / 1000 / 60 % 60);
             s = Math.floor(t / 1000 % 60);
         }
         document.getElementById("t_d").innerHTML = d + "天";
         document.getElementById("t_h").innerHTML = h + "时";
         document.getElementById("t_m").innerHTML = m + "分";
         document.getElementById("t_s").innerHTML = s + "秒";
     }
     //setInterval(GetRTime, 0);
     var main = function() {
    
     }
     var timer1;
     main.prototype = {
         start: function() {
             timer1 = setInterval(GetRTime, 0);
         },
         stop: function() {
             window.clearInterval(timer1);
         }
     };
     var Test1 = function() {
         var b = new main();
         b.start();
     }
     var Test2 = function() {
         var b = new main();
         b.stop();
     }
    

      3.方法三

     function GetRTime() {
         var EndTime = new Date('2017/01/20 00:00:00');
         var NowTime = new Date();
         var t = Math.abs(EndTime.getTime() - NowTime.getTime());
         var d = 0;
         var h = 0;
         var m = 0;
         var s = 0;
         if (t >= 0) {
             d = Math.floor(t / 1000 / 60 / 60 / 24);
             h = Math.floor(t / 1000 / 60 / 60 % 24);
             m = Math.floor(t / 1000 / 60 % 60);
             s = Math.floor(t / 1000 % 60);
         }
         document.getElementById("t_d").innerHTML = d + "天";
         document.getElementById("t_h").innerHTML = h + "时";
         document.getElementById("t_m").innerHTML = m + "分";
         document.getElementById("t_s").innerHTML = s + "秒";
     }
     //setInterval(GetRTime, 0);
     Function.prototype.method = function(name, fn) {
         this.prototype[name] = fn;
     }
     var main = function() {
    
     }
     var timer1;
     main.method('start', function() {
         timer1 = setInterval(GetRTime, 0);
     });
     main.method('stop', function() {
         window.clearInterval(timer1);
     });
    
     var Test1 = function() {
         var b = new main();
         b.start();
     }
     var Test2 = function() {
         var b = new main();
         b.stop();
     }
    

      4.方法四

     function GetRTime() {
         var EndTime = new Date('2017/01/20 00:00:00');
         var NowTime = new Date();
         var t = Math.abs(EndTime.getTime() - NowTime.getTime());
         var d = 0;
         var h = 0;
         var m = 0;
         var s = 0;
         if (t >= 0) {
             d = Math.floor(t / 1000 / 60 / 60 / 24);
             h = Math.floor(t / 1000 / 60 / 60 % 24);
             m = Math.floor(t / 1000 / 60 % 60);
             s = Math.floor(t / 1000 % 60);
         }
         document.getElementById("t_d").innerHTML = d + "天";
         document.getElementById("t_h").innerHTML = h + "时";
         document.getElementById("t_m").innerHTML = m + "分";
         document.getElementById("t_s").innerHTML = s + "秒";
     }
     //setInterval(GetRTime, 0);
     Function.prototype.method = function(name, fn) {
         this.prototype[name] = fn;
         return this;
     }
     var main = function() {
    
     }
     var timer1;
     main.method('start', function() {
         timer1 = setInterval(GetRTime, 0);
     }).method('stop', function() {
         window.clearInterval(timer1);
     });
    
     var Test1 = function() {
         var b = new main();
         b.start();
     }
     var Test2 = function() {
         var b = new main();
         b.stop();
     }
    

      在JavaScript中,函数是一等对象。它们可以存储在变量中,可以作为参数传递给其他函数,可以作为返回值从其他函数传出,还可以在运行时进行构造,这些特性带来了极大的灵活性和极强的表达能力。

  • 相关阅读:
    Katta:基于Lucene可伸缩分布式实时搜索方案
    cnprog
    Eclipse开发struts完全指南(二)安装与配置
    MYSQL 数据库导入导出命令
    ubuntuapache下隐藏thinkphp入口文件index.php
    PHP过滤指定字符串,过滤危险字符
    // 关闭调试模式  define('APP_DEBUG', false);
    Javascript读书笔记(1):从零开始
    Facebook messages实现解读
    《推荐系统实践》
  • 原文地址:https://www.cnblogs.com/xiaoma-ge/p/6292479.html
Copyright © 2011-2022 走看看