数字倒计时动画与翻转数字

时间:2018-07-02 12:21:46

标签: javascript html css

我正在尝试创建自己的数字倒计时,例如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>

0 个答案:

没有答案