天猫倒计时,网页倒计时JavaScript代码

admin 发布时间:2015-11-11 分类:Web 阅读:1264次 添加评论

天猫倒计时,网页倒计时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>


关键字词: 倒计时代码

暂无留言

发表评论:

◎欢迎您的参与讨论。