效果图:
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; 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); });