Javascript 在Snackbar中显示rundom编号_Javascript

Javascript 在Snackbar中显示rundom编号

javascript

Javascript 在Snackbar中显示rundom编号,javascript,Javascript,如何在消息后面显示随机数？随机数是我将函数放在java脚本函数中，但它没有显示任何内容，多亏了 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #snackbar { visibility: hidden; min-width: 250px; ma

如何在消息后面显示随机数？随机数是

我将函数放在java脚本函数中，但它没有显示任何内容，多亏了

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#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;
    left: 50%;
    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;}
}
</style>
</head>
<body>

<h2>Snackbar / Toast</h2>
<p>Snackbars are often used as a tooltips/popups to show a message at the bottom of the screen.</p>
<p>Click on the button to show the snackbar. It will disappear after 3 seconds.</p>

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

<div id="snackbar">the random number is </div>

<script>
function SnackGoout() {
    var x = document.getElementById("snackbar");

    x.className = "show";
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 6000);
        Math.floor(Math.random() * 11);
}


function yourFunction(){
    // do whatever you like here
SnackGoout();

setTimeout(yourFunction, 7000);

}

yourFunction();



</script>

</body>
</html>

这段代码每隔几秒钟在底部显示一条消息，所以我必须输入一个随机数，这是一个JavaScript函数来显示该数字

所以它应该是这样的，随机数是7，添加一个span元素来包含随机数：

<div id="snackbar">the random number is <span id="randomnumber"></span></div>

更新onclick按钮以显示snackbar：

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

小吃条{ 可见性：隐藏；最小宽度：250px；左边距：-125px；背景色：333；颜色：fff；文本对齐：居中；边界半径：2px；填充：16px；位置：固定； z指数：1；左：50%；底部：30px；字号：17px； } snackbar.show{ 能见度：可见； -webkit动画：fadein 0.5s，fadeout 0.5s 2.5s；动画：淡出0.5s，淡出0.5s，淡出2.5s； } @-webkit关键帧fadein{ 从{ 底部：0；不透明度：0； } 到{ 底部：30px；不透明度：1； } } @关键帧淡入淡出{ 从{ 底部：0；不透明度：0； } 到{ 底部：30px；不透明度：1； } } @-webkit关键帧淡出{ 从{ 底部：30px；不透明度：1； } 到{ 底部：0；不透明度：0； } } @关键帧淡出{ 从{ 底部：30px；不透明度：1； } 到{ 底部：0；不透明度：0； } } 小吃条/烤面包 snackbar通常用作工具提示/弹出窗口，在屏幕底部显示消息

单击按钮以显示snackbar。它将在3秒钟后消失

显示Snackbar 随机数是

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