截止日期计数器在现实生活中不起作用

Question

我正在写一个项目，应该从用户那里得到最后期限，并给现实生活中的最后期限留出时间，但我不知道如何在现实生活中实现它。还需要使用 dom，然后将其添加到本地存储

class DeadLine extends  HTMLElement {
    constructor(title,deadline) {
        super();
       this.title=title
        this.deadline=deadline
    }

        connectedCallback() {
            this.deadline = this.getAttribute('deadline')
            this.title = this.getAttribute('title')
            setInterval(this.update.bind(this), 1000)
            this.update()
        }

        update() {
            let delta = new Date(new Date(this.deadline) - new Date())
            let deltaDay = delta.getDate()-1
            let deltaMinutes = delta.getMinutes()
            let deltaSeconds = delta.getSeconds()
            return[deltaDay,deltaMinutes,deltaSeconds]
            //            let arr=[]
            //             arr.push(deltaDay,deltaMinutes,deltaSeconds)
            //             return arr;
         //    this.innerHTML = `
         // <h2>${ this.title}</h2>
         // <p> ${deltaDay} ${deltaMinutes} ${deltaSeconds}</p>
         // `
        }
 }
 customElements.define('my-deadline',DeadLine)
 deadlineElem.appendChild(newDead)
 btn.addEventListener('click',function (){
     outName.innerText = document.getElementById('titleElem').value
     document.getElementById('titleElem').value = null
     deadlineElem.appendChild(outName.cloneNode(true))
     outTime.innerText = document.getElementById('timeElem').value
     let newTime=document.getElementById('timeElem').value
     let newTitle =document.getElementById('titleElem').value
     document.getElementById('timeElem').value = null
     deadlineElem.appendChild(outTime.cloneNode(true))
     let time1= new DeadLine(newTitle, newTime)
     newDead.innerHTML=time1.update()
     deadlineElem.appendChild(newDead)

 })
 deadlineElem.appendChild(newDead)

Answer 1

我做了一些修改以确保倒计时正确显示

 class DeadLine extends HTMLElement {
        constructor() {
            super();
        }
    
        connectedCallback() {
            this.title = this.getAttribute('title');
            this.deadline = new Date(this.getAttribute('deadline'));
    
            setInterval(this.update.bind(this), 1000);
            this.update();
        }
    
        update() {
            const currentTime = new Date();
            const timeLeft = this.deadline - currentTime;
    
            if (timeLeft <= 0) {
                this.innerHTML = `<h2>${this.title}</h2><p>Time's up!</p>`;
            } else {
                const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
                const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
    
                this.innerHTML = `
                    <h2>${this.title}</h2>
                    <p>${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds left</p>
                `;
            }
        }
    }
    
    customElements.define('my-deadline', DeadLine);
    
    const btn = document.getElementById('submitButton');
    const deadlineElem = document.getElementById('deadlineContainer');
    
    btn.addEventListener('click', function () {
        const newTitle = document.getElementById('titleElem').value;
        const newTime = document.getElementById('timeElem').value;
    
        // Save to local storage if needed
        localStorage.setItem(newTitle, newTime);
    
        const newDead = document.createElement('my-deadline');
        newDead.setAttribute('title', newTitle);
        newDead.setAttribute('deadline', newTime);
    
        deadlineElem.appendChild(newDead);
    });