使用LocalStorage结合用户输入实现倒计时器时详情页持续报错的问题求助

嘿，折腾一周没解决这个报错确实闹心！我仔细看了你的代码，马上就找到问题所在啦～

问题根源 #

你把所有JavaScript逻辑写在了同一个文件里，而这个文件同时被首页（index.html）和详情页（details.html）加载了。但详情页里根本没有days-display、hours-display这些倒计时相关的DOM元素，也没有.text-container和.timer-displaybox容器。

所以每隔1秒执行一次的countDown函数，在详情页里会因为找不到这些元素而抛出错误，这就是你看到的“详情页持续报错且每隔一段时间更新”的原因！

解决方案：拆分页面逻辑 #

我们只需要让不同的页面执行对应的逻辑就行，具体修改如下：

document.addEventListener('DOMContentLoaded',()=>{
    // 先判断当前是详情页还是首页
    const isDetailsPage = document.getElementById('inputName') !== null;
    const isIndexPage = document.getElementById('days-display') !== null;

    // 👉 详情页专属逻辑：只处理用户输入和LocalStorage存储
    if(isDetailsPage){
        const nameFromUser = document.getElementById('inputName')
        const dateFromUser=document.getElementById('inputDate')
        const messageFromUser =document.getElementById('inputMessage')
        const submitBtn = document.getElementById('submit')

        window.addEventListener('input',()=>{
            if (nameFromUser.value && messageFromUser.value.length>2 && dateFromUser.value) {
                localStorage.setItem('dateInput',dateFromUser.value)
                localStorage.setItem('nameInput',nameFromUser.value)
                localStorage.setItem('messageInput',messageFromUser.value)
                submitBtn.removeAttribute('disabled')
            }
        })
        return; // 详情页逻辑结束，不往下执行倒计时代码
    }

    // 👉 首页专属逻辑：只处理倒计时渲染
    if(isIndexPage){
        const sec = 1000
        const min = sec*60
        const hour = min*60
        const day = hour*24

        let timerId

        function countDown() {
            // 先检查LocalStorage有没有存日期，没有的话直接返回
            const storedDate = localStorage.getItem('dateInput')
            if(!storedDate) return;

            const specialDay = new Date(storedDate)
            const messageDisplay= document.querySelector('.text-container')
            const timerDisplay = document.querySelector('.timer-displaybox')
            const today = new Date()
            const timeDiff = specialDay-today

            if (timeDiff <= -day) {
                timerDisplay.classList.add('timerUpgrade')
                timerDisplay.innerHTML=localStorage.getItem('nameInput')
                messageDisplay.innerHTML='I hope you had a wonderful day!!!'
                clearInterval(timerId)
                return
            }

            if (timeDiff <= 0) { // 这里改成<=0更严谨，避免刚好到点的遗漏
                timerDisplay.classList.add('timerUpgrade')
                timerDisplay.innerHTML= localStorage.getItem('nameInput')
                messageDisplay.innerHTML= localStorage.getItem('messageInput')
                clearInterval(timerId)
                return
            }

            // 确保元素存在再赋值，避免意外报错
            const daysEl = document.getElementById('days-display')
            const hoursEl = document.getElementById('hours-display')
            const minsEl = document.getElementById('mins-display')
            const secsEl = document.getElementById('secs-display')
            
            if(daysEl && hoursEl && minsEl && secsEl){
                daysEl.innerHTML=Math.floor(timeDiff/day)
                hoursEl.innerHTML=Math.floor((timeDiff % day)/hour)
                minsEl.innerHTML= Math.floor((timeDiff %  hour)/min)
                secsEl.innerHTML=Math.floor((timeDiff % min) /sec)
            }
        }

        timerId = setInterval(countDown,sec)
    }
})

额外优化小建议 #

1. 首页初始化时，如果LocalStorage里没有用户设置的日期，可以加个提示，引导用户去详情页设置；
2. 详情页的「Apply」按钮可以和「Submit」按钮合并逻辑，比如点击Submit后自动跳转到首页，这样用户体验更顺畅；
3. 可以给倒计时的数字补零（比如把1变成01），视觉上更美观。

备注：内容来源于stack exchange，提问作者Gwen