概述

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=falselocation.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 *60this.$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 * 60this.$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="warning" @click.native="gettime()">開始聽課</el-button>--><el-button type="primary" @click="computetime()">結束聽課</el-button><el-button type="primary" @click="out()">暫時離開</el-button> ``  `

總結

以上是生活随笔為你收集整理的Document.visibilityState 页面监听 vue中实现离开页面时计时停止： 停止计时后从上一次开始计时的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。