把时间数字分割成图片
效果图:

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);
});
--励志成为老坛酸菜的小白菜!

浙公网安备 33010602011771号