把时间数字分割成图片

效果图:

html代码:

<div class="pay">
    <div class="pay-time">
        <p>支付剩余时间</p>
        <div class="time-data">
            <span class="fen1"></span>
            <span class="fen2"></span>
            <i>:</i>
            <span class="miao1"></span>
            <span class="miao2"></span>
        </div>
    </div>

 css代码:

.time-data span{
    display: inline-block;
    padding-left: 0.1rem;
    width:0.5rem;
    height:0.6rem;
    line-height: 0.6rem;
    background: #ff9b2f;
    font-size: 0.56rem;
    letter-spacing:0.7rem;
    color: #ffffff;
}

  

 js代码:

//    倒计时
var intDiff = parseInt(1200); //倒计时总秒数量
function timer(intDiff) {
    window.setInterval(function () {
        var day = 0,
            hour = 0,
            minute = 0,
            second = 0; //时间默认值
        if (intDiff > 0) {
            day = Math.floor(intDiff / (60 * 60 * 24));
            hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
            minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
            second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
        }
        if (minute <= 9) minute = '0' + minute;
        if (second <= 9) second = '0' + second;
        $('.fen1').html('<s></s>' + (minute+"").charAt(0) );
        $('.fen2').html('<s></s>' + (minute+"").charAt(1) );
        $('.miao1').html('<s></s>' + (second+"").charAt(0) );
        $('.miao2').html('<s></s>' + (second+"").charAt(1) );
        intDiff--;
    }, 1000);
}
$(function () {
    timer(intDiff);
});

  

posted @ 2017-04-18 17:41  永往  阅读(323)  评论(0编辑  收藏  举报