如何在页面加载时显示小吃店 [重复]答案

【问题标题】：How to display the snack bar on page load [duplicate]如何在页面加载时显示小吃店 [重复]
【发布时间】：2017-09-06 19:49:26
【问题描述】：

您好，我想在页面加载后在我的页面上显示小吃吧，无需任何点击。我有一段代码，但它适用于 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>

【问题讨论】：

一个简单的谷歌搜索可以提供window.onload处理程序

标签： javascript jquery html css

【解决方案1】：

 $(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 秒

【讨论】：

谢谢 Muzamil301。可以在这里添加关闭功能吗？如果是，怎么做？
拜托普拉布，是的，这是可能的，但在目前的情况下，我们不需要关闭功能，因为小吃店会自行隐藏。如果你想自己隐藏它然后添加一个关闭按钮并使用jquery隐藏功能在点击关闭按钮时关闭小吃栏

【解决方案2】：

我认为与其做onclick，不如做$(document).ready(function(){ snackBar(); });

【讨论】：

【解决方案3】：

在 javascript 上试试这个：

<body onload="snackBar()">

如果你使用的是 jquery，那么你也可以试试这个：

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

希望这对你有用.. 谢谢！

【讨论】：

批准这个答案。如果它对你有用的话，。