如何在页面加载时显示小吃店

-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

如何在页面加载时显示小吃店

回答

相关问题