7.11JS项目：倒计时页面跳转+评论发布

一、页面跳转

演示

思路

1. 构建html框架后，在JS中获取对象：跳转按钮与显示剩余时间文本
2. 添加事件监听：检测点击行为->调用跳转函数
3. 跳转函数：(1)获取时间戳，(2)延时函数实现跳转，(3)间歇函数显示剩余时间——参考倒计时

html框架

    
前往百度
    

接下来是JS部分，获取按钮与显示文本对象，添加事件监听

        const div = document.querySelector('div')
        const span = document.querySelector('span')
        div.addEventListener('click', jump)
        //jump函数为跳转函数

实现跳转函数

        function jump() {
            //获取时间戳
            const begin = parseInt(+new Date() / 1000)
            const end = begin + 5
            //计算剩余时间
            const start = parseInt(+new Date() / 1000)
            const last_ = (end - start) % 60
            span.innerHTML = `页面还有${last_}秒跳转`
            //书写延时函数
            setTimeout(function () {
                //清除间歇函数
                clearInterval(id)
                location.href = 'http://ww.baidu.com'
            }, 6000)
            //间歇函数显示剩余时间
            let id=setInterval(function () {
                const now = parseInt(+new Date() / 1000)
                const last = (end - now) % 60
                span.innerHTML = `页面还有${last}秒跳转`
            }, 1000)
        }

注意点：

• 实际上从5秒到0秒共有6秒，为了浏览舒适，延时函数设置为5+1=6秒
• 由于跳转时新页面需要加载渲染，此时原跳转页面仍然在运行，如果不在延时函数中清除间歇函数，间歇函数会继续计时，此时显示为“页面还有-1秒跳转”，为了防止这种情况出现，需要利用间歇函数的返回值清除间歇函数。

完整代码：

    
    
    
    



    
前往百度
    
    

二、评论发布

演示

思路：

1. 先搭建html框架，包含大盒子，输入框，提交按钮，评论模板（不可见）。需要获取的元素：输入框，提交按钮，评论模板
2. 给提交按钮添加事件监听，检测到点击->克隆评论模板->添加新评论->修改评论内容（输入内容，获取日期，并改为可见）

html框架

        
        submit
        

            
111
                
2025-05-21
            
        
    

//此时li的样式：
        ul li {
            display: none;
            list-style: none;
            text-indent: 1em;
        }

JS部分：获取对象

        const btn = document.querySelector('button')
        //克隆节点需要通过父节点获取，因此也要获取ul对象
        const ul = document.querySelector('ul')
        const li = document.querySelector('li')

构造函数

        //添加事件监听
        btn.addEventListener('click', addnewcomment)
        //新评论函数
        function addnewcomment() {
            //克隆
            const newli = li.cloneNode(true)
            //插入
            ul.insertBefore(newli, ul.children[0])
            //修改newli
            newli.style.display = 'block'
            ul.children[0].innerHTML=`${getcomment()}
${formdate()}
`
        }

        //获取输入
        function getcomment() {
            const comments=document.querySelector('input').value
            //清空输入框
            document.querySelector('input').value=null
            return comments
        }
        //日期补零函数
        function getzero(str) {
            return str < 10 ? '0' + str : str
        }
        //日期函数
        function formdate() {
            const date = new Date();
            let year = date.getFullYear()
            //月份取值：0-11，需要加1校准
            let month = date.getMonth() + 1
            let dates = date.getDate()
            return `${year}-${getzero(month)}-${getzero(dates)}`
        }

完整代码

    
    
    
    



    

        
        submit
        

            
111
                
2025-05-21
            
        
    
    

注意点：

• 要小心标签嵌套的数据修改
• 节点克隆与修改部分的结构需要先理清逻辑关系，不要盲目敲代码