[英]jQuery.countdown styling
我已经使用以下方法创建了一个 jQuery 倒数计时器: http : //hilios.github.io/jQuery.countdown/
<h1>Count down timer</h1>
<div id="getting-started"></div>
<script type="text/javascript">
$('#getting-started').countdown('2016/01/01', function(event) {
$(this).html(event.strftime('%w weeks %d days %H:%M:%S'));
});
</script>
这是一个plunker: http ://plnkr.co/edit/gcewqxLMchFmWgZjwpwW?p=preview
但是,我是否设置了倒计时的样式以实现上面主页的倒计时效果?
查看主页的来源,我设法“破解”了类似的东西: http : //plnkr.co/edit/2UwnSfidZHWDt1eg9P4n?p=preview
那里有很多内联 JS:
$(window).on('load', function() {
var labels = ['weeks', 'days', 'hours', 'minutes', 'seconds'],
nextYear = (new Date().getFullYear() + 1) + '/01/01',
template = _.template($('#main-example-template').html()),
currDate = '00:00:00:00:00',
nextDate = '00:00:00:00:00',
parser = /([0-9]{2})/gi,
$example = $('#main-example');
// Parse countdown string to an object
function strfobj(str) {
var parsed = str.match(parser),
obj = {};
labels.forEach(function(label, i) {
obj[label] = parsed[i]
});
return obj;
}
// Return the time components that diffs
function diff(obj1, obj2) {
var diff = [];
labels.forEach(function(key) {
if (obj1[key] !== obj2[key]) {
diff.push(key);
}
});
return diff;
}
// Build the layout
var initData = strfobj(currDate);
labels.forEach(function(label, i) {
$example.append(template({
curr: initData[label],
next: initData[label],
label: label
}));
});
// Starts the countdown
$example.countdown(nextYear, function(event) {
var newDate = event.strftime('%w:%d:%H:%M:%S'),
data;
if (newDate !== nextDate) {
currDate = nextDate;
nextDate = newDate;
// Setup the data
data = {
'curr': strfobj(currDate),
'next': strfobj(nextDate)
};
// Apply the new values to each node that changed
diff(data.curr, data.next).forEach(function(label) {
var selector = '.%s'.replace(/%s/, label),
$node = $example.find(selector);
// Update the node
$node.removeClass('flip');
$node.find('.curr').text(data.curr[label]);
$node.find('.next').text(data.next[label]);
// Wait for a repaint to then flip
_.delay(function($node) {
$node.addClass('flip');
}, 50, $node);
});
}
});
});
您可以通过在 strftime 函数中添加 div 来按照您想要的方式进行样式设置:
$('#getting-started').countdown('2025/02/25', function(event) { var $this = $(this).html(event.strftime('' + '<div class="test">%w</div> weeks ' + '<div class="test">%d</div> days ' + '<div class="test">%H</div> hr ' + '<div class="test">%M</div> min ' + '<div class="test">%S</div> sec')); });
.test{ color:green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script> <nav><div id="getting-started"></ul></nav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.