如何在頁面加載時顯示小吃店

-4

嗨，我想在頁面加載後顯示小吃店後沒有任何點擊。我有一段代碼，但它在onclick中起作用。但是我想在頁面加載後沒有任何點擊的情況下顯示消息。如何在頁面加載時顯示小吃店

function snackBar() { 
 
    var x = document.getElementById("snackbar") 
 
    x.className = "show"; 
 
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); 
 
}

#snackbar { 
 
    visibility: hidden; 
 
    min-width: 250px; 
 
    margin-left: -125px; 
 
    background-color: #333; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 2px; 
 
    padding: 16px; 
 
    position: fixed; 
 
    z-index: 1; 
 
    right:0; 
 
    bottom: 30px; 
 
    font-size: 17px; 
 
} 
 

 
#snackbar.show { 
 
    visibility: visible; 
 
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; 
 
    animation: fadein 0.5s, fadeout 0.5s 2.5s; 
 
} 
 

 
@-webkit-keyframes fadein { 
 
    from {bottom: 0; opacity: 0;} 
 
    to {bottom: 30px; opacity: 1;} 
 
} 
 

 
@keyframes fadein { 
 
    from {bottom: 0; opacity: 0;} 
 
    to {bottom: 30px; opacity: 1;} 
 
} 
 

 
@-webkit-keyframes fadeout { 
 
    from {bottom: 30px; opacity: 1;} 
 
    to {bottom: 0; opacity: 0;} 
 
} 
 

 
@keyframes fadeout { 
 
    from {bottom: 30px; opacity: 1;} 
 
    to {bottom: 0; opacity: 0;} 
 
}

<button onclick="snackBar()">Show Snackbar</button> 
 

 
<div id="snackbar">Some text some message..</div>

來源

2017-04-11 Prabu

一個簡單的谷歌搜索可以提供'窗口。 onload'處理程序 –

試試這個JavaScript的：

<body onload="snackBar()">

，如果你正在使用jQuery，那麼你可以試試這個太：

$(document).ready(function() { 
    snackBar(); 
});

希望這會爲你工作..謝謝！

來源

2017-04-11 12:28:16

批准此ans。如果它對你有用的話。 –

我想，而不是做onclick你會做$(document).ready(function(){ snackBar(); });

來源

2017-04-11 12:31:51 stephenpassero

$(document).ready(function() { 
 
setTimeout(function(){ 
 
     var x = document.getElementById("snackbar"); 
 
     x.className = "show"; 
 
     setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1000); 
 
     }, 2000) 
 
    });

#snackbar { 
 
     visibility: hidden; 
 
     min-width: 250px; 
 
     margin-left: -125px; 
 
     background-color: #333; 
 
     color: #fff; 
 
     text-align: center; 
 
     border-radius: 2px; 
 
     padding: 16px; 
 
     position: fixed; 
 
     z-index: 1; 
 
     right:0; 
 
     bottom: 30px; 
 
     font-size: 17px; 
 
    } 
 

 
    #snackbar.show { 
 
     visibility: visible; 
 
     -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; 
 
     animation: fadein 0.5s, fadeout 0.5s 2.5s; 
 
    } 
 

 
    @-webkit-keyframes fadein { 
 
     from {bottom: 0; opacity: 0;} 
 
     to {bottom: 30px; opacity: 1;} 
 
    } 
 

 
    @keyframes fadein { 
 
     from {bottom: 0; opacity: 0;} 
 
     to {bottom: 30px; opacity: 1;} 
 
    } 
 

 
    @-webkit-keyframes fadeout { 
 
     from {bottom: 30px; opacity: 1;} 
 
     to {bottom: 0; opacity: 0;} 
 
    } 
 

 
    @keyframes fadeout { 
 
     from {bottom: 30px; opacity: 1;} 
 
     to {bottom: 0; opacity: 0;} 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="snackBar()">Show Snackbar</button> 
 

 
    <div id="snackbar">Some text some message..</div>

嗨！這個演示會告訴你沒有任何點擊只有DOM加載的小吃店，你也可以設置窗口加載後的小吃店時間，只要你想顯示像2000 = 2秒

來源

2017-04-11 12:47:58 Muzamil301

謝謝Muzamil301。在這裏可以添加關閉功能？如果是，如何？ – Prabu

我的名字Prabu，是的，這是可能的，但是對於目前的情況，我們並不需要關閉功能，因爲小吃店自己躲藏起來。如果你想自己隱藏它，然後添加一個關閉按鈕，並使用jquery隱藏功能來關閉小吃店點擊關閉按鈕 – Muzamil301

如何在頁面加載時顯示小吃店

回答

相關問題