第一次在这里发布,轻松进行。
我在最近的项目中遇到一些问题。我正在尝试创建一个倒计时作为着陆页,并为每个数字都提供音频声音(如果有人熟悉,请使用街头霸王2的音效)。我已经设法使倒数计时开始工作,并且它只能工作,但是只需单击一个按钮,因为这是我可以使它工作的唯一方法。
就像我说的那样,这不是理想的效果,因为一旦倒计时完成,我希望它加载主页。此外,关于将声音添加到每个单独的数字,我绝对不知道从哪里开始!
这是我目前的JS

    document.addEventListener('DOMContentLoaded', () => {
    const timeLeftDisplay = document.querySelector('#time-left')
    const startBtn = document.querySelector('#start-button')
    let timeLeft = 10

    function countDown (){
        setInterval(function(){
            if(timeLeft <= 0){
                clearInterval(timeLeft = 0)
            }
            timeLeftDisplay.innerHTML = timeLeft
            timeLeft -= 1
        }, 1000)
    }

    startBtn.addEventListener('click', countDown)

} )
这是当前的HTML
<script type= "text/javascript" src="assets/javascript/script.js"></script>
<title>Bro-nament</title>
</head>
<body>
<div class="container text-center">
    <h1 class="bro-title"> TIME TILL BRO - DOWN</h1>
    <h2 id="time-left"> 10 </h2>
    <button id="start-button"> <i class="fas fa-fist-raised">   Continue?  </i> <i class="fas fa-fist-raised"></i></button>
Current page view
谢谢

最佳答案

在服务器中,您需要为所有音频文件命名,并使用time变量的值递增并获取每一秒钟的文件URL。
喜欢 :

  • 9.mp3
  • 8.mp3
  • 7.mp3
  • 6.mp3
  • ....

  • 一旦计数器为0,您就可以重定向到所需的网址。

    let time = 10;
    countdown();
    
    function countdown() {
      // we upadate number text
      document.querySelector('#time-left').textContent = --time;
    
      // if count is equal to 0 (end of counter)
      if (time === 0) {
         time = 10;
         // we redirect to this url
         window.location.href = "http://www.google.com";
         // we stop the loop
         return false;
      }
    
      //console.log(time);
    
      // we set the url of audio file for each seconde
      const audio = new Audio("https://srv-store5.gofile.io/download/RFgvcw/" + time + ".mp3");
      // if you only want one, u dont need the const time
      //const audio = new Audio("https://srv-store5.gofile.io/download/RFgvcw/1.mp3");
    
      audio.play();
    
      setTimeout(countdown, 1000);
    }
    #time-left {
        font-size: 150px;
        font-weight: bold;
        margin: auto 0;
        text-align: center;
    }
    <div id="time-left"></div>

    关于javascript - 如何在JavaScript中将音频添加到10秒倒计时,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/64651113/

    10-11 23:29
    查看更多