付款成功后秒数倒计时

不爱吃糖的程序媛

发布于 2024-01-18 21:23:22

840

发布于 2024-01-18 21:23:22

文章被收录于专栏：夏天的前端笔记夏天的前端笔记

在制作商城项目时，我们付款后经常会有一个几秒后跳转页面的计时

效果图

源代码

<!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>定时跳转</title>
</head>
<body>
  <div>
    <h2>提交成功</h2>
    <a href = "http://www.baidu.com">
      <span id = "seconds">10</span>秒后系统会自动跳转，也可单击此链接跳转
    </a>
  </div>
</body>
</html>

<script>
  function timing (secs,url){
    var seconds = document.getElementById('seconds');
    seconds.innerHTML = --secs;
    if(secs > 0){
      setTimeout('timing('+ secs + ',\'' +url + '\' )',1000);
    }else{
      location.href = url ;
    }
  };
  timing(10,'http://www.baidu.com');
</script>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-01-18，如有侵权请联系 cloudcommunity@tencent.com 删除

系统