点击之后显示倒计时并删除广告效果

利用js实现点击之后提示5秒倒计时，结束之后删除广告效果

css部分：

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            width: 300px;
            height: 200px;
            background-color: pink;
            background-image: url(../day15/course01.png);
            background-size: cover;
        }

html部分：

<div id="ad">
        <!-- <img src="../day15/course01.png" alt=""> -->
    </div>

 js部分：

// 获取广告元素
        let ad = document.getElementById("ad")

        // 定义倒计时函数
        ad.onclick = function () {
            let seconds = 5 // 倒计时秒数
            // 每隔1秒更新一次倒计时
            ad.innerText = "广告将在5秒后关闭"
            let interval = setInterval(function () {
                // let count = seconds
                // ad.innerText = "广告将在 " + count + " 秒后关闭"
                // seconds--
                // if (count === 0) {
                //     clearInterval(interval) // 停止倒计时
                //     ad.parentNode.remove()
                //     ad.style.display = "none"// 隐藏广告元素
                // }
                seconds--
                ad.innerText = "广告将在" + seconds + "秒后关闭"

                if (seconds === 0) {
                    clearInterval(interval) // 停止倒计时
                    // ad.parentNode.remove()
                    ad.style.display = "none"// 隐藏广告元素
                }

            }, 1000)
        }