JS面向对象

最近经常碰到页面活动倒计时的效果，于是写了个js倒计时的方法，独立出来成js文件，以后用到直接引用Common.js文件就可以了。很简单的js，记一下：

Common.js文件：

var CountDown = {

    "LeftTime": function (t) { //t参数格式 : 2015/2/11 10:08:51

        var dt = new Date(t);

        var now = new Date();

        var disTime = dt - now;

        if (disTime <= 0) {

            return 0;

        }

        var days = parseInt(disTime / (1000 * 3600 * 24));

        var leftDay = parseInt(disTime % (1000 * 3600 * 24));

        var hours = parseInt(leftDay / (1000 * 3600));

        var leftHour = parseInt(leftDay % (1000 * 3600));

        var minutes = parseInt(leftHour / (1000 * 60));

        var leftMinute = parseInt(leftHour % (1000 * 60));

        var seconds = parseInt(leftMinute / (1000));

        var showDay = (days < 10) ? ('0' + days.toString()) : days.toString();

        var showHour = (hours < 10) ? ('0' + hours.toString()) : hours.toString();

        var showMinute = (minutes < 10) ? ('0' + minutes.toString()) : minutes.toString();

        var showSecond = (seconds < 10) ? ('0' + seconds.toString()) : seconds.toString();

        return showDay + "|" + showHour + "|" + showMinute + "|" + showSecond;

    }

};

下面是不能实现倒计时的：

var CountDown = {

    "now": new Date(), // CountDown对象创建的时候，now成员变量只赋一次值

    "LeftTime": function (t) { //t参数格式 : 2015/2/11 10:08:51

        var dt = new Date(t);

        var now = this.now; // 获取的now属性的值是不变的，所以倒计时不会真正的倒计时

        var disTime = dt - now;

        if (disTime <= 0) {

            return 0;

        }

        var days = parseInt(disTime / (1000 * 3600 * 24));

        var leftDay = parseInt(disTime % (1000 * 3600 * 24));

        var hours = parseInt(leftDay / (1000 * 3600));

        var leftHour = parseInt(leftDay % (1000 * 3600));

        var minutes = parseInt(leftHour / (1000 * 60));

        var leftMinute = parseInt(leftHour % (1000 * 60));

        var seconds = parseInt(leftMinute / (1000));

        var showDay = (days < 10) ? ('0' + days.toString()) : days.toString();

        var showHour = (hours < 10) ? ('0' + hours.toString()) : hours.toString();

        var showMinute = (minutes < 10) ? ('0' + minutes.toString()) : minutes.toString();

        var showSecond = (seconds < 10) ? ('0' + seconds.toString()) : seconds.toString();

        return showDay + "|" + showHour + "|" + showMinute + "|" + showSecond;

    }

};

使用的页面：

<script src="@Url.Content("~/Common.js")" type="text/javascript"></script>

<h2>Index</h2>



<script type="text/javascript">

    var time = "2015/3/11 10:01:15";

    var value = CountDown.LeftTime(time);

    var times = value.split('|');

    alert(times[0] + "天" + times[1] + "时" + times[2] + "分" + times[3] +"秒");

</script>

 在使用的页面使用计时器，就可以实现页面倒计时效果了。

<script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>

<script src="@Url.Content("~/Common.js")" type="text/javascript"></script>

<h2 id="showTime">Index</h2>

<p id="test"></p>

<script type="text/javascript">

    //var t = 0; //用来配合测试计时器是否被删除

    function leftTime() {

        var time = "2015/2/11 10:33:15";

        var value = CountDown.LeftTime(time);

        //$("#test").html(t++); //用来测试计时器是否被删除(次方法不再被调用就说明计时器已被清除) if (value == 0) {

            window.clearInterval(beginInterver); //清除计时器 return;

        }

        var times = value.split('|');

        $("#showTime").html(times[0] + "天" + times[1] + "时" + times[2] + "分" + times[3] + "秒");

        //alert(times[0] + "天" + times[1] + "时" + times[2] + "分" + times[3] + "秒");

    }

    var beginInterver = setInterval(leftTime, 1000);

</script>

 

 =============================================================================================

附加js面向对象知识：http://www.iteye.com/topic/434462

    //第1种写法  

    function Circle(r) {  

          this.r = r;  

    }  

    Circle.PI = 3.14159;  

    Circle.prototype.area = function() {  

      return Circle.PI * this.r * this.r;  

    }  

      

    var c = new Circle(1.0);     

    alert(c.area());   

    //第2种写法  

    var Circle = function() {  

       var obj = new Object();  

       obj.PI = 3.14159;  

         

       obj.area = function( r ) {  

           return this.PI * r * r;  

       }  

       return obj;  

    }  

      

    var c = new Circle();  

    alert( c.area( 1.0 ) );  

    //第3种写法  

    var Circle = new Object();  

    Circle.PI = 3.14159;  

    Circle.Area = function( r ) {  

           return this.PI * r * r;  

    }  

      

    alert( Circle.Area( 1.0 ) );  

    //第4种写法  

    var Circle={  

       "PI":3.14159,  

     "area":function(r){  

              return this.PI * r * r;  

            }  

    };  

    alert( Circle.area(1.0) );  

    //第5种写法  

    var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}");  

      

    alert( (new Circle()).area(1.0) );  

特别是最后两种，经常见到。