2.支付10s倒计时

最新推荐文章于 2024-02-04 12:42:38 发布

如果决定要走又何必挽留

最新推荐文章于 2024-02-04 12:42:38 发布

阅读量144

点赞数

分类专栏：代码练习文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_59076775/article/details/126862624

版权

代码练习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML和JavaScript实现支付操作的确认弹窗，以及10秒后自动跳转到指定界面的代码片段。通过window.confirm()和location.href，展示了前端交互与路由控制的基本技巧。

摘要由CSDN通过智能技术生成

效果:

点击确定之后:

10s之后跳转到对应的界面:

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        li{
            list-style: none;
            margin: 20px;
        }
        li:nth-child(1){
            padding-top: 20px;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
            margin: 200px auto;
        }
        .bottom{
            /* background-color: aqua; */
            padding-left: 50px;
        }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>商品:笔记本电脑 </li>
        <li>原价:1980</li>
        <li>现价:1500</li>
        <li></li>
        <li></li>
      </ul>
      <div class="bottom">
        <button>取消</button>
        <button>支付</button>
      </div>
    </div>
  </body>
  <script>
    // 1.点击支付,出现弹框
    document.getElementsByTagName('button')[1].onclick=function(){
      let res= window.confirm('您确定要支付吗')
      if (res) {
        location.href='./aa.html'
        
      }
    }

  </script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h1>恭喜你,支付成功</h1>
    <p><span id="jumpTo">10秒</span>后自动返回首页</p> 
    <button>立即返回</button>
</body>
<script>
    // 逻辑:加载页面时,应该触发定时1000

    window.onload=function(){
        let timer=10     
        setInterval(() => {
            timer--;
            document.getElementById('jumpTo').innerText=timer
            if (timer===0) {
                location.href='https://lenovo.ilive.cn/?f=stle'
                
            }
        }, 1000);
    }
</script>
</html>

逻辑分析

定义一个变量等于10,进来每次都进行递减，获取到页面的10并且赋值给它。当等于0的时候

进行页面的跳转。