Document.visibilityState 页面监听 vue中实现离开页面时计时停止：停止计时后从上一次开始计时

╰+攻爆jí腚メ 2022-11-15 14:25 143阅读 0赞

## 概述 ##

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);
          }
    
        },

## 停止计时后从上一次开始计时 ##

methods: { 
           startStopVideo() { 
      if (document.visibilityState === 'hidden') { 
    
        if(this.yes==true){ 
          var stop1 = clearInterval(this.startTimer);
          this.yes = false;
        }
        else if(this.yes==false) { 
          var stop2 = clearInterval(this.startTimer);
          this.yes = true
    
        }
    window.location.reload()
      } else if (document.visibilityState === 'visible') { 
        this.$message('您刚刚离开了观看页面，将从零开始计时！')
        // if(this.yes==true){ 
        // this.timer= setInterval(this.startTimer,1000);
        // }
        // else if(this.yes == false){ 
        // this.timer= setInterval(this.startTimer,1000);
        // }
    ///this.gettime()
        this.getCompetence();
        var _this = this;
        this.thisCancas = document.getElementById("canvasCamera");
        this.thisContext = this.thisCancas.getContext("2d");
        this.thisVideo = document.getElementById("videoCamera");
        window.setInterval(
            this.setImage
            , 2000);
      }
    },
        out(){ 
          var stop1 = clearInterval(this.timer);
        },
        startTimer () { 
    
            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;
          
        },

<el-button type="warning" @click.native="gettime()">开始听课</el-button>
    
        <el-button type="primary" @click="computetime()">结束听课</el-button>
        <el-button type="primary" @click="out()">暂时离开</el-button>
    ``
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210402095220665.png)
    `