这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战。

一、HTML布局

实现设计好相关需要的区域，html布局如下：

1、商品名称区域

2、商品价格区域

3、取消按钮

4、支付按钮

布局核心html代码如下：

   <main>
      <p>商品：js高级教程</p>
      <p>价格：100</p>
      <p>内容：javascript</p>
      <p>
        <button>取消</button>
        <button>支付</button>
      </p>
    </main>

二、CSS样式

因为主要是为了练习一下javascript的代码，html布局的样式信息怎么方便怎么来，哈哈哈，样式如下：

main {
  width: 200px;
  height: 200px;
  background-color: gainsboro;
  box-shadow: #eee 2px 4px;
  padding: 20px;
  margin: 0 auto;
}
main p button {
  margin: 30px 25px;
}

加完样式信息后的布局如下图：

三、Javascript特效

1、获取取消和支付按钮，代码如下：

let cancelBtn = document.getElementsByTagName("button")[0];
let payBtn = document.getElementsByTagName("button")[1];

2、为取消按钮绑定点击响应事件，即设置返回的链接，代码如下：

cancelBtn.addEventListener("click", () => {
    location.href = "https://www.bilibili.com/video/BV1yf4y1a7qv";
});

3、为支付按钮绑定点击响应事件，设置跳转到确认支付的页面，代码如下：

payBtn.addEventListener("click", () => {
    let res = window.confirm("确认支付吗？");
    if (res) {
        // 跳转页面
        location.href = "./success.html";
    }
});

四、支付成功页面

（一）HTML布局

html布局如下：

 <main>
      <h2>恭喜您，支付成功！</h2>
      <span id="jump">10</span>秒后自动返回首页
      <p><button>立即返回</button></p>
    </main>

（二）CSS样式

理由之前一样，怎么简单怎么来，信息，样式信息如下

加完样式信息后的布局如下图

（三）Javascript特效

1、获取确认按钮和倒计时标签，代码如下：

2、为确定按钮绑定点击响应事件，即设置返回的链接，代码如下：

3、设置定时器，实现倒计时功能，代码如下：

B站视频网址：www.bilibili.com/video/BV1ZM…