第一次在这里发布,轻松进行。
我在最近的项目中遇到一些问题。我正在尝试创建一个倒计时作为着陆页,并为每个数字都提供音频声音(如果有人熟悉,请使用街头霸王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。
喜欢 :
一旦计数器为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/