我正在尝试创建自己的数字倒计时,例如this
我下载了源代码,但不知道是哪个部分负责此标记和动画。
有人可以帮助我完成尝试吗?
无需为整个倒计时编写代码,仅需为一个动画部分(例如几秒钟)编写代码即可。
谢谢。
var dt = "2019:01:01 00:00:00";
var parts = dt.split(/[- :]/);
parts[1]--;
const targ = new Date(...parts);
function givemediff() {
var diff = Date.parse(targ) - Date.parse(new Date());
var sec = Math.floor((diff / 1000) % 60);
var minutes = Math.floor((diff / 1000 / 60) % 60);
var hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
var days = Math.floor(diff / (1000 * 60 * 60 * 24));
return {'diff': diff, 'days': days, 'hours': hours, 'minutes': minutes, 'sec': sec};
}
function updateClock() {
var t = givemediff();
$('#clockday').text(('0' + t.days).slice(-2));
$('#clockhour').text(('0' + t.hours).slice(-2));
$('#clockmin').text(('0' + t.minutes).slice(-2));
if (t.sec < 10) {var tsec = '0' + t.sec;}
else {var tsec = t.sec;}
$('#clockpartsec').toggleClass('xflipped');
$('#clockinsec').text(tsec);
if (t.diff <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
.clockwrap{
display: inline-block;
white-space:nowrap;
background:black;
color:white;
padding:10px;
}
.clockpart{
display:inline-block;
text-align: center;
padding:5px 9px;
border-right:2px solid white;
.perspective: 200px;
position: relative;
transform-style: preserve-3d;
transform-origin: center center;
transition: transform 1s;
.background:lightseagreen;
}
.clockpartins{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
.overflow:hidden;
display:block;
margin:0 auto;
}
.xflipped{
transform: rotateX(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='clockwrap' id='clockwrap'>
<div class='clockpart'>
<div class='clockpartins' id='clockday'></div>
</div>
<div class='clockpart'>
<div class='clockpartins' id='clockhour'></div>
</div>
<div class='clockpart'>
<div class='clockpartins' id='clockmin'></div>
</div>
<div class='clockpart' id='clockpartsec'>
<div class='clockpartins' id='clockinsec'></div>
</div>
</div>