星星博客 »  > 

Document.visibilityState 页面监听 vue中实现离开页面时计时停止:

概述

Document.visibilityState (只读属性), 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页,或者(正在)预渲染.可用的值如下:

‘visible’ : 此时页面内容至少是部分可见. 即此页面在前景标签页中,并且窗口没有最小化.
‘hidden’ : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 ‘锁屏状态’ .
‘prerender’ : 页面此时正在渲染中, 因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始,永远不能从其他值变为此状态.注意: 浏览器支持是可选的.
当此属性的值改变时, 会递交 visibilitychange (en-US) 事件给Document.

一旦页面不可见,就暂停视频播放。

var vidElem = document.getElementById('video-demo');
document.addEventListener('visibilitychange', startStopVideo);

function startStopVideo() {
  if (document.visibilityState === 'hidden') {
    vidElem.pause();
  } else if (document.visibilityState === 'visible') {
    vidElem.play();
  }

另外:< meta http-equiv=“refresh” content=“5”>
其中5指每隔5秒刷新一次页面。

vue中实现离开页面时计时停止:

 created() {
//this.timer=this.gettime()

    document.addEventListener('visibilitychange', this.startStopVideo)

  },
    beforeDestroy() {
    document.removeEventListener('visibilitychange', this.startStopVideo)

  }

  methods: {

   startStopVideo() {
  if (document.visibilityState === 'hidden') {
    this.yes=false
    location.reload();

  } else if (document.visibilityState === 'visible') {
  this.gettime()
  }
},
}

  startTimer () {
      this.begintime = Date()
      this.seconds += 1;
      if (this.seconds >= 60) {
        this.seconds = 0;
        this.minutes = this.minutes + 1;
      }

      if (this.minutes >= 60) {
        this.minutes = 0;
        this.hour = this.hour + 1;
      }
      this.total = this.minutes + this.hour *60
      this.$refs.startTimer.innerHTML = (this.minutes < 10 ? '0' + this.minutes : this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds : this.seconds) +'  total:'+this.total;

    },
     gettime(){
      var time = new Date();
      time.getHours(); //获取当前小时数(0-23)
      time.getMinutes(); //获取当前分钟数(0-59)
      time.getSeconds(); //获取当前秒数(0-59)
      this.begintime = time.getHours()+":"+time.getMinutes()+":"+time.getSeconds()
      if(this.yes) {
        this.timer = setInterval(this.startTimer, 1000);
      }

    },

相关文章