[英]how to show a loading div for 5 second when button click then redirect to next page
我正在做一個測驗項目。 在用戶單擊按鈕時給出答案后,我想添加加載 div 5 秒,然后重定向到贏或輸頁面。還讓我知道 css 覆蓋整個屏幕。
在我的代碼下方,但這在 5 秒內不起作用...
<div id="spinner" style="display:none">
<img src="/sites/all/modules/custom/admin_job/assets/images/spinning-loading.gif">
</div>
<script>
$(document).ready(function() {
$('#edit-submit').click(function(){
$("#spinner").show();
setTimeout(function() { $("#spinner") }, 5000);
});
});
</script>
正如我在評論中所說,您在超時 function 中錯過了一個.hide()
$(() => { $('#button').on('click', () => { $('#spinner').show() setTimeout(() => { $('#spinner').hide(); }, 5000) }) })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="spinner" style="display:none">This is a spinner</div> <button id="button">Click</button>
我相信這更符合您的意願:
setTimeout(() => { document.getElementsByClassName('spinning-icon-two')[0].style.display = 'none'; document.getElementsByClassName('hidden-page')[0].style.display = 'block'; }, 5000);
.spinning-icon { display: none; }
<div class="hidden-page" style="display:none;"> This was the hidden page while the div was shown the loading icon. </div> <div class="spinning-icon-two" style="width:100%;height:0;padding-bottom:100%;position:relative;"><iframe src="https://giphy.com/embed/t8WHEAfuku6muxkGPo" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/perfect-loops-t8WHEAfuku6muxkGPo">via GIPHY</a></p>
這應該可以解決問題。 您可以相應地修改它以滿足您的需要。
$(document).ready(function() { $('#edit-submit').click(function(){ $("#spinner").css('display', 'block'); setTimeout(function (){ location.href = 'https://jsfiddle.net/TebogoJSF/sp5kzq2m/5/'; }, 5000); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="spinner" style="display:none"> <img src="https://media.giphy.com/media/3o7bu3XilJ5BOiSGic/giphy.gif" width="25"> </div> <button id="edit-submit"> Click Me </button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.