本文共 3739 字，大约阅读时间需要 12 分钟。

概述

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

   
    开始听课
   
       
   
    结束听课
       
   
    暂时离开
   ``![在这里插入图片描述](https://img-blog.csdnimg.cn/20210402095220665.png)`

转载地址：http://ovten.baihongyu.com/