Document.visibilityState 页面监听 vue中实现离开页面时计时停止： 停止计时后从上一次开始计时
原创
©著作权归作者所有：来自51CTO博客作者TvT~的原创作品，请联系作者获取转载授权，否则将追究法律责任
概述
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="warning" @click.native="gettime()">开始听课</el-button>-->
<el-button type="primary" @click="computetime()">结束听课</el-button>
<el-button type="primary" @click="out()">暂时离开</el-button>
``
`
