flip.js 实现5分钟倒计时
今天一个倒计时需求，找到一个插件，比较好用，不过感觉不是特别灵活， 需要息定义样式的话，得改原码。其它相关需求，直接百度收官网去看，直接上代码吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/flip.min.css">
<script src="assets/flip.min.js"></script>
<title></title>
</head>
<body>
<style>
.tick {
width: 260px;
font-size:1rem;
white-space:nowrap;
font-family:arial,sans-serif;
position: relative;
}
.tick-group {
margin:0 .5em;
text-align:center;
}
.spot-box {
position: absolute;
top: 0px;
left: 125px;
}
.spot {
margin-top: 15px;
width: 8px;
height: 8px;
background: linear-gradient(180deg, #CDCCCC 0%, #AFAFAF 100%);
box-shadow: 0px 4px 4px 0px rgba(162,162,162,0.5);
border-radius: 2px;
}
</style>
<div class="tick" data-did-init="handleTickInit">
<div data-repeat="true" data-layout="horizontal fit" data-transform="preset(m, s) -> delay">
<div class="tick-group">
<div data-key="value" data-repeat="true" data-transform="pad(00) -> split -> delay">
<span data-view="flip"></span>
</div>
<!-- <span data-key="label" data-view="text" class="tick-label"></span> -->
</div>
</div>
<div class="spot-box">
<div class="spot"></div>
<div class="spot" style="margin-top:8px;"></div>
</div>
</div>
<script>
function handleTickInit(tick) {
offset = new Date();
// time in hours the timer will run down
var timeDuration = Tick.helper.duration(5, 'minutes');
// add 24 hours to get final deadline
var deadline = new Date( offset.setMilliseconds( offset.getMilliseconds() + timeDuration ) );
// create counter
var counter = Tick.count.down(deadline, { format: ['m', 's'] } );
// update tick with the counter value
counter.onupdate = function(value) {
tick.value = value;
};
counter.onended = function() {
// redirect, uncomment the next line
// window.location = 'my-location.html'
// hide counter, uncomment the next line
// tick.root.style.display = 'none';
// show message, uncomment the next line
// document.querySelector('.tick-onended-message').style.display = '';
};
}
</script>
</body>
</html>