倒计时结束后,javaScript 和 HTML 中的倒计时页面不会重定向到另一个页面

时间:2021-04-07 17:29:56

标签: javascript javascript-objects countdown

有人可以帮我吗??我遇到了问题 我正在使用带有 index.html 的纯 JavaScript 作为倒计时计时器,我在下面分享了它在倒计时结束时重定向到一个 URL,但它不工作,因为我期待我太接近了。我的代码工作正常,但问题是倒计时结束后页面未重定向到其他页面,这是我的问题...

    const daysEl = document.getElementById("days");
    const hoursEl = document.getElementById("hours");
    const minsEl = document.getElementById("mins");
    const secEl = document.getElementById("sec");
    
    const bd = "april 8,2021 00:00:00";
    function countdown() {
        const bdDate = new Date(bd);
        const currentDate = new Date();
    
        const seconds = (bdDate - currentDate);
    
        const days = Math.floor(seconds / (1000 * 60 * 60 * 24));
    
        const hours = Math.floor((seconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    
        const mins = Math.floor((seconds % (1000 * 60 * 60)) / (1000 * 60));
        const sec = Math.floor((seconds % (1000 * 60)) / (1000));
    
    
        daysEl.innerHTML = formatime(days);
        hoursEl.innerHTML = formatime(hours);
        minsEl.innerHTML = formatime(mins);
        secEl.innerHTML = formatime(sec);
    
    
        function formatime(time) {
            return time < 10 ? `0${time}` : time;
        }
         function timeout()
        {window.location.href="boom.html"}
    }
    
    countdown();
    setInterval(countdown,1000);
    setTimeout(timeout(),secEl)
    
    **and this is my HTML code**
    
        <!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Coundown Timer </title>
        <link rel="stylesheet" href="styles.css">
            <script src="index.js" defer>  </script>
    </head>
    <body>
       <h1>Birthday Countdown<

/h1>
       <div class="countdown-container">
        <div class="days-count">
            <p class="big-text" id="days" >0</p>
            <span>days </span>
    
        </div>
    
        <div class="hours-count">
            <p class="big-text" id="hours" > 0 </p>
            <span>     hours </span>
    
        </div>
        
        <div class="mins-count">
            <p class="big-text" id="mins" > 0 </p>
            <span>   mins </span>
            </div>
    
            <div class="sec-count">
                <p class="big-text" id="sec" > 0 </p>
                <span> sec </span>
        
            </div>
    
        </div>
    
    
       </div>
    </body>
    </html> 
    
        

0 个答案:

没有答案