倒计时

demo:

<!DOCTYPE HTML>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="applicable-device" content="pc,mobile" />
    <title>买房玩吧</title>
    <meta name="renderer" content="webkit" />
    <meta name="keywords" content="房产资讯,房价走势,地产名博,企业动态,房产投资"/>
    <meta name="description" content="凤凰房产北京为您提供最新的房产资讯。"/>
	<script src="http://s0.ifengimg.com/static/js/jquery-1.7.2.min_c4de8813.js"></script>
	<style>
	style
	</style>

</head>
<body>



<p class="countdown" time="14566752000">倒计时：
	<span class="day">0</span>天
	<span class="hour">00</span>小时
	<span class="min">00</span>分
	<span class="sec">00</span>秒
</p>


<script type="text/javascript" src="countDown_clear.js"></script>

</body>
</html>

JS:

/*******************倒计时********************/

function countDown(selecter) {
    this.selecter = selecter;
    this.container = $(selecter);
    this.timer = [null, null, null, null];
}
countDown.prototype = {
    init: function() {
        var me = this;
        me.container = $(document).find(me.selecter);
        for (var i = 0; i < me.container.length; i++) {
            clearInterval(me.timer[i]);
        }

        for (var i = 0; i < me.container.length; i++) {
            var obj = $(me.selecter + ":eq(" + i + ")");
            var endTime = obj.attr("time");
            this.countdown(obj, endTime, i);//先执行一次，显示倒计时结束的状态；

            var oDate = new Date();
            var s = endTime - parseInt(oDate.getTime() / 1000);
            if (s < 0) continue;
            (function(obj, endTime, i){
                me.timer[i] = setInterval(function() {
                    me.countdown(obj, endTime, i);
                }, 1000);
            })(obj, endTime, i);
        }

    },
    countdown: function(obj, endTime, index) {
        var oDate = new Date();
        var s = endTime - parseInt(oDate.getTime() / 1000);
        if (s < 0) {    //活动结束后
            data = {
                day: 0,
                hour: 00,
                min: 00,
                sec: 00
            };
            for (var i in data) {
                obj.find("." + i).html(data[i]);
            }
            obj.html("活动进行中!");
        } else {
            var data = {};
            data.day = parseInt(s / 86400);
            s %= 86400;
            data.hour = parseInt(s / 3600);
            s %= 3600;
            data.min = parseInt(s / 60);
            data.sec = s % 60;
            for (var i in data) {
                obj.find("." + i).html(data[i]);
            }
        }
    }
};

$(document).ready(function() {
    var clock = new countDown(".countdown");
    clock.init();
});

JS-滚到可视区才开始  倒计时：

/*******************倒计时********************/

function countDown(selecter) {
    this.selecter = selecter;
    this.container = $(selecter);
    this.timer = [null, null, null, null];
    this.onlyOne = false;
    this.cover = [false, false, false, false];
}
countDown.prototype = {
    init: function() {
        var me = this;
        me.container = $(document).find(this.selecter);
        for (var i = 0; i < me.container.length; i++) {
            clearInterval(me.timer[i]);
        }
        //if (me.onDoing()) {
        if (me.onlyOne) {
            return;
        };
        me.onlyOne = true;
        for (var i = 0; i < me.container.length; i++) {
            me.doingCount();//先执行一次，免得出现一秒的0；
            me.timer[i] = setInterval(function() {
                me.doingCount();
            }, 1000);
        }
        // }
        // this.bind()

    },
    bind: function() {
        var me = this;
        $(window).on('scroll', function() {
            if (me.onDoing()) {
                if (me.onlyOne) {
                    return;
                };
                me.onlyOne = true;
                for (var i = 0; i < me.container.length; i++) {
                    me.timer[i] = setInterval(function() {
                        me.doingCount();
                    }, 1000);
                }
            } else {
                for (var i = 0; i < me.container.length; i++) {
                    clearInterval(me.timer[i]);
                }
                me.onlyOne = false;
            }
        });
    },
    onDoing: function() {
        var st = $("html").scrollTop() || $("body").scrollTop();
        var cH = $(window).height();
        var cst = $(".doing-countdown").offset().top;
        var conH = $(".doing-countdown").height();
        return st > cst - cH && st < cst + conH;
    },
    doingCount: function() {
        this.container = $(document).find(this.selecter);
        for (var i = 0; i < this.container.length; i++) {
            var obj = $(this.selecter + ":eq(" + i + ")");
            var endTime = obj.attr("time");
            this.countdown(obj, endTime, i);
        }
    },
    countdown: function(obj, endTime, index) {
        var oDate = new Date();

        var s = endTime - parseInt(oDate.getTime() / 1000);
        if (s < 0) {    //活动结束后
            data = {
                day: 0,
                hour: 00,
                min: 00,
                sec: 00
            };
            for (var i in data) {
                obj.find("." + i).html(data[i]);
            }
            if (this.cover[index]) {
                return;
            }
            this.cover[index] = true;
            obj.html("活动进行中!");
        } else {
            var data = {};
            data.day = parseInt(s / 86400);
            s %= 86400;
            data.hour = parseInt(s / 3600);
            s %= 3600;
            data.min = parseInt(s / 60);
            data.sec = s % 60;
            for (var i in data) {
                obj.find("." + i).html(data[i]);
            }
        }

    }

};

$(document).ready(function() {
    var clock = new countDown(".countdown");
    clock.init();
});

　　

　　

posted @ 2016-05-12 11:26  xiangcy  阅读(171)  评论(0)    收藏  举报