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=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>
``
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210402095220665.png)
`

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

小程序如何在其他页面监听globalData中值的变化？
小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 前言这几天去面试,多 ...
php离开界面监听,js实现用户离开页面前提示是否离开此页面的方法（包括浏览器按钮事件）...
本文实例讲述了js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件).分享给大家供大家参考.具体如下: 用户离开页面前,提示是否离开此页面(包括浏览器按钮事件) window.onbef ...
vue 组件监听页面切换_vue项目如何监听窗口变化，达到页面自适应？
[自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...
vue 点击事件传递多个参数_Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
Vue.js开发记录--用watch监听对象中属性的变化
监听对象中所有属性存在对象obj,若想要监听其中所有的值的变化 watch: {obj: {handler (val) {// coding},deep: true}, } 监听对象中某个属性如果 ...
【js监听报错】页面监听js报错问题
<html> <head> <script type="text/javascript">// 页面监听js报错问题 οnerrοr=handl ...
HTM页面监听Crtl + C 事件
HTM页面监听Crtl + C 事件 document.addEventListener("copy", function(e) {//取消默认事件,才能修改复制的值var cop ...
HTML父页面监听子页面关闭并回调方法
1.方式一:父页面监听父页面中: //此处省略新窗口的设置参数var win = window.open("url", "name", "featu ...
监听localStorage变化（同页面监听）
"当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发" 同页面监听,重写localStorage的方法,抛出自定义事件: &l ...

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

概述

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

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

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

最新文章

热门文章

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

概述

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

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

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

最新文章

热门文章

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

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