JavaScript简单的面向对象

最新推荐文章于 2024-11-05 15:26:40 发布

dgdfh6575

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量63

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaoma-ge/p/6292479.html

版权

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

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

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

<!DOCTYPE html>
<html>

<head>
    <title>Demo-01</title>
    <script src="./main.js"></script>
</head>

<body>
    <button οnclick="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 οnclick="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中，函数是一等对象。它们可以存储在变量中，可以作为参数传递给其他函数，可以作为返回值从其他函数传出，还可以在运行时进行构造，这些特性带来了极大的灵活性和极强的表达能力。

转载于:https://www.cnblogs.com/xiaoma-ge/p/6292479.html