admin 发布时间:2015-11-11 分类:Web 阅读:4680次 添加评论
天猫倒计时,网页倒计时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>
关键字词: 倒计时代码
发表评论:
◎欢迎您的参与讨论。