模拟支付成功返回首页倒计时

最新推荐文章于 2024-06-19 13:30:04 发布

老汉当码农

最新推荐文章于 2024-06-19 13:30:04 发布

阅读量275

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_51573077/article/details/116953757

版权

记录JS小练习

倒计时

页面一

<style>
    *{border: 0;padding: 0;}
    .box{width: 200px;height: 300px;background-color: #f5f5f5;padding: 10px;}
    .box div{margin-bottom: 10px;}
    .box div:nth-child(6) button{margin-right: 40px;}
  </style>
<body>
  <div class="box">
    <div>商品：篮球</div>
    <div>原价：999</div>
    <div>现价：199</div>
    <div>颜色：花牛色</div>
    <div>
      <button>取消</button>
      <button>支付</button>
    </div>
  </div>
  <script>
    document.getElementsByTagName('button')[1].onclick = function(){
      // console.log(1);
      let ser = window.confirm('你确定要支付吗？');//这里是一个布尔值
      if(ser){
        location.href = "./cuss.html"
      }
    }

页面二

<style>
    #dingshi{color: red;font-size: 25px;}
  </style>
<div>
    <h2>恭喜您，支付成功</h2>
    <span id="dingshi">10</span>秒后自动返回首页
    <p><button>立即返回</button></p>
  </div>
  <script>
    //跳转到这个页面时触发一个定时器
    window.onload = function(){
      let timer = 10;//定义一个变量，用来表示动态数字
      setInterval(()=>{
        timer--;
        document.getElementById('dingshi').innerHTML = timer
        if(timer==0){//判断动态数字，不能小于0
          location.href = './mian.html'
        }
      },1000)
    }
    //点击立即返回直接跳转到指定页面
    document.getElementsByTagName('button')[0].onclick = function(){
      location.href = './mian.html'
    }
  </script>