在jQuery.countdown完成后显示隐藏内容
在jQuery.countdown完成后显示隐藏内容
提问于 2019-09-12 19:46:53
我正在使用jQuery.countdown插件在页面上显示倒计时。
一旦倒计时结束，我想隐藏倒计时并显示一个隐藏的div。
我已经设法做到了，但前提是在倒计时运行时，浏览器上的页面是可见的。如果我试图在event.strftime结束后访问页面，我看到的只是具有0天/小时/分钟/秒的静态倒计时，并且我试图获得与查看页面时相同的结果(隐藏倒计时并显示隐藏的div)
这是我使用的代码：
$("span#limit").countdown("2019-09-12 16:00:00", function(event) {
$(this).text(event.strftime('%D days %H:%M:%S'));
}).on('finish.countdown', function() {
$(this).hide(200);
$('.div').show(800);
});.div {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
<span id="limit"></span>
<div class="div">
Hidden content
</div>
谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-09-12 19:58:15
function finish() {
$('span#limit').hide(200);
$('.div').show(800);
}
$("span#limit").countdown("2019-09-12 17:27:00", function(event) {
$(this).text(event.strftime('%D days %H:%M:%S'));
event.elapsed && finish();
}).on('finish.countdown', finish)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js" integrity="sha256-Ikk5myJowmDQaYVCUD0Wr+vIDkN8hGI58SGWdE671A8=" crossorigin="anonymous"></script>
<span id="limit"></span>
<div class="div">
Hidden content
</div>
Stack Overflow用户
发布于 2019-09-12 19:56:26
您需要确保在执行脚本之前已经加载了DOM (文档对象模型)。使用document.ready，如下所示
<head>
<style>
.div {display: none;}
</style>
</head>
<body>
<span id="limit"></span>
<div class="div">
Hidden content
</div>
<script>
$(document).ready(function(){
$("span#limit").countdown("2019-09-12 16:00:00", function(event) {
$(this).text(event.strftime('%D days %H:%M:%S'));
}).on('finish.countdown', function() {
$(this).hide(200);
$('.div').show(800);
});
});
</script>
</body>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57906049
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号