5秒後にゴーホーム(カウントダウン)

要件:

登録が成功または変更、パスワード、5秒ホーム・ページにジャンプした後。

  • test.vue例:
<template>
    <div class="timedown-outside">
        <h3><i>{{countDown}}</i> 秒后跳转到<span>首页</span> </h3>
        <button @click="timeDown">点击开始倒计时</button>
    </div>
</template>
<script>
export default {
  name: 'test',
  data () {
    return {
      countDown: 5,
      timer: ''
    }
  },
  methods: {
      //*** 利用计时器,控制用于倒计时的变量countDown(1秒减1),countDown为 0 时 清除该定时器,并跳转到首页。
    timeDown () {
      if (!this.timer) {
        this.timer = setInterval(() => {
          if (this.countDown > 0) { 
            this.countDown--
          } else {
            clearInterval(this.timer)
            this.$router.push({ path: '/' })
          }
        }, 1000)
      }
    }
  }
}
</script>
<style>
    .timedown-outside{
        width:300px;
        height:150px;
        padding-top:50px;
        margin: auto;
        background:lightyellow;
    }
   span{
       color:#f40;
    }
    span:hover{
        color:purple;
        text-decoration:underline;
        cursor:pointer;
        font-size:16px;
    }
    i{
        font-size: 24px;
    }
</style>

ボタンをクリックする前に:
ここに画像を挿入説明
:、カウントダウンボタンをクリックして
ここに画像を挿入説明
前のページにジャンプした後、カウントダウンが終了すると:
ここに画像を挿入説明

公開された18元の記事 ウォン称賛18 ビュー3557

おすすめ

転載: blog.csdn.net/ddx2019/article/details/104673882