Question

如何在消息“随机数是”之后显示随机数？

我将函数正确地放在了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

Answer 1

添加一个span元素以包含您的随机数：

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

将以下行添加到js yourFunction（）中，以代替当前的Math.floor（）：

document.getElementById('randomnumber').textContent = Math.floor(Math.random() * 100);

更新您的onclick按钮以显示小吃栏：

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

function SnackGoout() {
  var x = document.getElementById("snackbar");

  x.className = "show";
  setTimeout(function() {
    x.className = x.className.replace("show", "");
  }, 6000);
  document.getElementById('randomnumber').textContent = Math.floor(Math.random() * 100);
}


function yourFunction() {
  // do whatever you like here
  SnackGoout();

  setTimeout(yourFunction, 7000);

}

yourFunction();

<!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="yourFunction()">Show Snackbar</button>

  <div id="snackbar">the random number is <span id="randomnumber"></span></div>

</body>

</html>

在小吃栏中显示随机数

1 个答案: