用Jquery实现倒计时

之前在此写过类似的文章, 如果自己遇到好看的网页,首先是分析一下网页的源码,看有没有好用的东西,如果有好用的,自己分析着把好用的单独分离开来,然后分享折腾。

这里演示一下效果:
距离2014年还有

小时分钟

用JQuery的函数实现倒计时显示,在此我在这个页面里分享代码和演示一下好用的功能。
首先建立span 标签,并且设置ID,诸如以下形式。

<code>
<div id="countdown">
<span id="days"></span>天
<span id="hours"></span>小时
<span id="minutes"></span>分
<span id="seconds"></span>秒
</div>
</code>

把以上代码放到合适的位置。

以下就是Jquery代码了,放置到合适的js文件或者使用< script 内嵌至页面中。

<code>
var jq = jQuery.noConflict();
jq(function() {
    init();
    digitalTime();
    autoHeight();
    scrollBar();
    sayGoodBey();
    addMask()
});
function init() {
    jq("#wp").attr("style", "width:966px;");
    jq("#iSay").click(function() {
        jq('html,body').animate({
            scrollTop: jq("#comment").offset().top
        },
        300)
    });
    jq("body").attr("onresize", "autoCenter();")
}
function digitalTime() {
    var deadline = new Date("00:00:00  04/08/2014");
    var now = new Date();
    var diff = -480 - now.getTimezoneOffset();
    var leave = (deadline.getTime() - now.getTime()) + diff * 60000;
    var day = Math.floor(leave / (1000 * 60 * 60 * 24));
    var hour = Math.floor(leave / (1000 * 3600)) - (day * 24);
    var minute = Math.floor(leave / (1000 * 60)) - (day * 24 * 60) - (hour * 60);
    var second = Math.floor(leave / (1000)) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
    jq("#countdown  #days,#ie6day").text(zeros(day, 2));
    jq("#countdown  #hours").text(zeros(hour, 1));
    jq("#countdown  #minutes").text(zeros(minute, 1));
    jq("#countdown  #seconds").text(zeros(second, 1));
    if (day <= 0 && hour <= 0 && minute <= 0 && second <= 0) {
        day = hour = minute = second = 0
    } else {
        setTimeout(function() {
            digitalTime()
        },
        1000)
    }
}
function zeros(time, num) {
    if (num == 1) {
        if (time < 10) {
            return "0" + time
        } else {
            return time
        }
    } else if (num == 2 && time < 100) {
        if (time < 10) {
            return "00" + time
        } else if (time < 100) {
            return "0" + time
        }
        return time
    }
    return time
}
function autoHeight() {
    var content = jq("#content");
    var sideBar = jq("#sideBar");
    if (content.height() > sideBar.height()) {
        sideBar.height(content.height())
    } else {
        content.height(sideBar.height())
    }
}
function scrollBar() {
    jq("#scrollBar  ul  li").mouseover(function() {
        var obj = jq("#scrollBt");
        var _this = jq(this);
        var num = _this.index("#scrollBar  ul  li");
        var pics = jq("#ie6Pictures  ul");
        obj.stop();
        pics.stop();
        obj.animate({
            "left": 71 * num
        },
        500,
        function() {
            jq("#scrollBar  ul  li").removeAttr("class");
            _this.addClass("active")
        });
        pics.animate({
            "marginLeft": 0 - 665 * num
        },
        800)
    })
}
function sayGoodBey() {
    jq("#participate").click(function() {
        maskToggle(true)
    });
    jq("#ie6Box  #boxTitle  #closeBt").click(function() {
        maskToggle(false)
    })
}
function addMask() {
    var mask = "<div  id=\"ie6Mask\"></div>";
    var box = "";
    jq("body").prepend(mask)
}
function maskToggle(obj_display) {
    var obj = jq("body");
    if (obj_display) {
        autoCenter();
        jq("#ie6Box").show();
        obj.css("overflow", "hidden");
        jq("#ie6Mask").width(obj.width()).height(obj.height()).show()
    } else {
        obj.css("overflow", "auto");
        jq("#ie6Box").hide();
        jq("#ie6Mask").hide()
    }
}
function autoCenter() {
    var _body = jq("body");
    var _obj = jq("#ie6Box");
    var _w = 697,
    _h = 531;
    if (document.documentElement.scrollTop) {
        _obj.css({
            "top": document.documentElement.scrollTop + (document.documentElement.clientHeight) / 2 - _h / 2,
            "left": _body.width() / 2 - _w / 2
        })
    } else {
        _obj.css({
            "top": document.body.scrollTop + (document.documentElement.clientHeight) / 2 - _h / 2,
            "left": _body.width() / 2 - _w / 2
        })
    }
}
</code>

在Jquery中
你可以修改一下内容中的“01/01/2014”依你的要求来改写。

<code>var deadline = new Date("00:00:00  01/01/2014");</code>


oh my god,似乎分离有问题,我还要好好研究一番,不懂Javascript,试着找找原因吧,如果你知道,给我说说吧~

One thought on “用Jquery实现倒计时
  1. 记忆碎片 2012/11/05 22:23  0

    很不错的博客 本页面下 返回顶部失效

Comments are closed.

添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。