<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>倒计时</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<div id="countDown">
<div class="count-down-item">
<div class="countdown-days"
style="color:#FFFFFF;font-size:22px;font-weight:600;text-align:center;">
<span class="countdown-position-wapper" style="width: 18px;height: 30px;">
<span class="countdown-digit static" style="top: 0px; opacity: 1;">0</span>
</span>
<span class="countdown-position-wapper" style="width: 18px;height: 30px;">
<span class="countdown-digit static" style="top: 0px; opacity: 1;">0</span>
</span>
</div>
<span class="count-down-item-text"
style="color:#FFFFFF;font-size:14px;font-weight:normal;text-align:center;">DAYS</span>
</div>
<div class="count-down-item">
<div class="count-hours"
style="color:#FFFFFF;font-size:22px;font-weight:600;text-align:center;">
<span class="countdown-position-wapper" style="width: 18px;height: 30px;">
<span class="countdown-digit static" style="top: 0px; opacity: 1;">0</span>
</span>
<span class="countdown-position-wapper" style="width: 18px;height: 30px;">
<span class="countdown-digit static" style="top: 0px; opacity: 1;">0</span>
</span>
</div>
<span class="count-down-item-text"
style="color:#FFFFFF;font-size:14px;font-weight:normal;text-align:center;">HOURS</span>
</div>
<div class="count-down-item">
<div class="count-minutes"
style="color:#FFFFFF;font-size:22px;font-weight:600;text-align:center;">
<span class="countdown-position-wapper" style="width: 18px;height: 30px;">
<span class="countdown-digit static" style="top: 0px; opacity: 1;">0</span>
</span>
<span class="countdown-position-wapper" style="width: 18px;height: 30px;">
<span class="countdown-digit static" style="top: 0px; opacity: 1;">0</span>
</span>
</div>
<span class="count-down-item-text"
style="color:#FFFFFF;font-size:14px;font-weight:normal;text-align:center;">MINUTES</span>
</div>
<div class="count-down-item">
<div class="count-seconds"
style="color:#FFFFFF;font-size:22px;font-weight:600;text-align:center;">
<span class="countdown-position-wapper" style="width: 18px;height: 30px;">
<span class="countdown-digit static" style="top: 0px; opacity: 1;">0</span>
</span>
<span class="countdown-position-wapper" style="width: 18px;height: 30px;">
<span class="countdown-digit static" style="top: 0px; opacity: 1;">0</span>
</span>
</div>
<span class="count-down-item-text"
style="color:#FFFFFF;font-size:14px;font-weight:normal;text-align:center;">SECONDS</span>
</div>
</div>
<script>
var positions = $('#countDown').find('.countdown-position-wapper');
/**
* 获取倒计时并更新
*/
function updateTime() {
let total = Date.parse('2023-05-10 17:20:00') - Date.parse(new Date());
days = Math.floor(total / (1000 * 60 * 60 * 24))
hours = Math.floor((total / (1000 * 60 * 60)) % 24)
minutes = Math.floor((total / 1000 / 60) % 60)
seconds = Math.floor((total / 1000) % 60)
total--;
if (total < 0) {
seconds = 0
minutes = 0
hours = 0
days = 0
clearInterval(timer);
}
updateDigitPosition(0, 1, days);
updateDigitPosition(2, 3, hours);
updateDigitPosition(4, 5, minutes);
updateDigitPosition(6, 7, seconds);
};
// 倒计时定时器
let timer = setInterval(updateTime, 1000);
/**
* 一次性更新两位数位置
* @param {Object} firstIndex
* @param {Object} secondIndex
* @param {Object} value
*/
function updateDigitPosition(firstIndex, secondIndex, value) {
changeDigit(positions.eq(firstIndex), Math.floor(value / 10) % 10);
changeDigit(positions.eq(secondIndex), value % 10);
}
function changeDigit(position, number) {
var digit = position.find('.countdown-digit')
if (digit.is(':animated')) {
return false;
}
if (position.data('digit') == number) {
// 已经显示了这个数字
return false;
}
position.data('digit', number);
var replacement = $('<span>', {
'class': 'countdown-digit',
css: {
top: '-30px',
opacity: 0
},
html: number
});
// 在动画制作时添加.static类,其中top值为countdownConfig中设置的positionWapperHeight
digit
.before(replacement)
.removeClass('static')
.animate({
top: '30px',
opacity: 0
}, 'fast', function() {
digit.remove();
})
replacement
.delay(100)
.animate({
top: 0,
opacity: 1
}, 'fast', function() {
replacement.addClass('static');
});
}
</script>
</body>
</html>
<style>
html,
body {
font-family: 'CenturyGothic' !important;
max-width: 100%;
margin-left: auto;
margin-right: auto;
word-break: break-word;
color: #232222;
}
div {
box-sizing: border-box;
}
#countDown {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding-bottom: 32px;
}
.count-down-item {
display: flex;
flex-direction: column;
align-items: center;
width: 25%;
}
.count-down-item-text {
padding-top: 8px;
}
.countdown-position-wapper {
display: inline-block;
overflow: hidden;
position: relative;
}
.countdown-digit {
position: absolute;
display: block;
letter-spacing: -1px;
}
</style>
原生jquery实现倒计时功能【animate】动画特效包含天,时分秒
于 2023-05-03 10:50:52 首次发布