之前在此写过类似的文章, 如果自己遇到好看的网页,首先是分析一下网页的源码,看有没有好用的东西,如果有好用的,自己分析着把好用的单独分离开来,然后分享折腾。
这里演示一下效果:
距离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>
<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>
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,试着找找原因吧,如果你知道,给我说说吧~
很不错的博客 本页面下 返回顶部失效