JavaScript基础 - 经典案例1 - 支付倒计时

 适合 js 初学者练习用

需求1：初始页面 index.html 如上，点击支付按钮，弹出确认框 “您确定要支付吗？”，点击确认后，跳转到 target.html 

 

 

需求2：target.html 页面如上，跳转后会自动从10秒开始倒计时，倒计时结束后自动跳转回 index.html 页面

需求3：点击立即返回按钮，也能回到 index.html 页面

代码示例：

index.html 

<div class="box">
    <p>商品：500ML 纯牛奶</p>
    <p>价格：3 元</p>
    <p>地址：北京市朝阳区</p>

    <button class="pay">支付</button>
</div>

// 获取支付按钮
let pay = document.querySelector('.pay')

    // 监听支付按钮点击事件
    pay.addEventListener('click', () => {
    
    // confirm 是一个带有确认和取消按钮的提示框，当点击确认时返回true，取消时返回false
    // confirm 传入的参数字符串是在弹出的提示框中显示的文本
    let flag = confirm('您确定要支付吗？')

    if (flag) {
        // 在本页跳转到指定链接地址
        location.href = './target.html'
    }
})

target.html

<div class="box">
    <h2 class="title">恭喜您，支付成功</h2>
    <p><span>10</span> 秒后自动返回首页</p>
    <button>立即返回</button>
</div>

let btn = document.querySelector('button')

btn.addEventListener('click', () => {

    // 跳转到 index.html 页面
    location.href = './index.html'
})

// 获取显示倒计时秒数的 span 标签
let span = document.querySelector('span')

// 设置初始倒计时秒数为 10
let second = 10

// 开启定时器
let timer = setInterval(() => {
    
    // 每隔 1s 倒计时秒数减 1
    second--
    
    // 将秒数填入span内部
    span.innerHTML = second

    // 判断倒计时是否结束
    if (second === 0) {

        // 关闭定时器
        clearInterval(timer)

        // 跳转到 index.html 页面
        location.href = './index.html'
    }
}, 1000);

结束；