admin 发布时间:2015-11-11 分类:Web 阅读:5604次 添加评论
天猫倒计时,网页倒计时JavaScript特效,距离2015-11-11日倒计时:
天猫倒计时,网页倒计时JavaScript代码:
<style type="text/css">
body {
}
.sp-banner-countdown {
width: 500px;
height: 55px;
/*position: absolute;
top: 375px;
right: 282px;*/
/*background-image: url(http://a.vpimg3.com/upload/actpics/act/sp/branches/pc_sp/act-20151111/img/warm/countdownbg.d8d93f93.png);*/
background-position: 0 0;
background-repeat: no-repeat;
text-align:center;
background:#ccc;
height:150px;
}
.sp-banner-countdown .banner-cd-cont {
height: 80px;
overflow: hidden;
line-height: 50px;
width:400px;
margin:0px auto;
}
.sp-banner-countdown .banner-cd-s {
float: left;
display: block;
/*margin-right: 28px;*/
width: 52px;
height: 50px;
text-align: right;
font-size: 32px;
color: #fff;
letter-spacing: 5px;
font-family: bebas,tahoma;
background:url(http://resource.520.cn/img/active/flashbuy/num_bg.png) center left repeat-x;
}
.sp-banner-countdown .b-cd-s {
color: #ffbb45
}
.sp-banner-countdown .banner-cd-hd {
/*position: absolute;
top: 3px;
left: 136px;*/
height: 20px;
color: #fff;
font-family: microsoft Yahei;
line-height: 20px;
font-size: 14px;
margin:10px auto;
}
.sp-banner-countdown .cd-d {
text-indent:4px;
letter-spacing: 9px;
}
.sp-banner-countdown .cd-h {
text-indent:4px;
letter-spacing: 9px;
}
.sp-banner-countdown .cd-m,.sp-banner-countdown .cd-s {
text-indent:4px;
letter-spacing: 9px;
}
.banner-text {
float:left;
font-size:24px;
}
.sp-banner-countdown .banner-cd-cont .cd-w {width:52px;letter-spacing:9px;text-indent:4px;}
</style>
<script>
String.prototype.padLeft = function (padChar, width) {
var ret = this;
while (ret.length < width) {
if (ret.length + padChar.length < width) {
ret = padChar + ret;
}
else {
ret = padChar.substring(0, width - ret.length) + ret;
}
}
return ret.replace(/(.)(?=[^$])/g, "$1");
};
//window.onload = function () {
// window.setInterval(function () { ShowCountDown('2015-11-12'); }, interval);
//}
$(function () {
window.setInterval(function () { ShowCountDown('2015-11-12'); }, interval);
})
var interval = 1,count=99;
function ShowCountDown(str) {
var now = new Date();
var year = str.split('-')[0];
var month = str.split('-')[1];
var day = str.split('-')[2];
var endDate = new Date(year, month - 1, day);
var leftTime = endDate.getTime() - now.getTime();
var leftsecond = parseInt(leftTime / 1000);
//var day1=parseInt(leftsecond/(24*60*60*6));
var day1 = Math.floor(leftsecond / (60 * 60 * 24));
var hour = Math.floor((leftsecond - day1 * 24 * 60 * 60) / 3600);
var minute = Math.floor((leftsecond - day1 * 24 * 60 * 60 - hour * 3600) / 60);
var second = Math.floor(leftsecond - day1 * 24 * 60 * 60 - hour * 3600 - minute * 60);
count=count <= 0?99:count - 1;
var microsecond = count;
var cdh = document.getElementById("J-cd-h");
var cdm = document.getElementById("J-cd-m");
var cds = document.getElementById("J-cd-s");
var cdw = document.getElementById("J-cd-w");
cdh.innerHTML = (hour + "").padLeft('0', 2);
cdm.innerHTML = (minute + "").padLeft('0', 2);
cds.innerHTML = (second + "").padLeft('0', 2);
cdw.innerHTML = (microsecond + "").padLeft('0', 2);
}
</script>
<div class="sp-banner-countdown">
<p class="banner-cd-hd">距离活动结束还有</p>
<div class="banner-cd-cont">
<span class="banner-cd-s cd-h" id="J-cd-h">00</span><span class="banner-text">时</span>
<span class="banner-cd-s cd-m" id="J-cd-m">00</span><span class="banner-text">分</span>
<span class="banner-cd-s cd-s" id="J-cd-s">00</span><span class="banner-text">秒</span>
<span class="banner-cd-s cd-w" id="J-cd-w">99</span><span class="banner-text"></span>
<span class="countdown-s" style="clear:both;"></span>
</div>
</div>
关键字词: 倒计时代码
发表评论:
◎欢迎您的参与讨论。