首页 > 其他分享 >js---判断用户是否在浏览当前页面

js---判断用户是否在浏览当前页面

时间:2023-11-14 10:22:24浏览次数:40  
标签:function index 用户 timer js --- autoPlay 页面

最近遇到一个需求,需要判断用户是否在当前页面,只有用户在当前页面才可以播放视频,如果切换到其他窗口就要将视频暂停掉,避免学生刷课程,以下是具体的代码:

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var index = 0, timer = null;
autoPlay();
function autoPlay(){
    timer = setInterval(function(){
        index++;
        $(".div").html(index);
    },1000);
}
document.onvisibilitychange = function() {  
    if (document.hidden) {
        console.log('用户已经离开了当前页面');
        clearInterval(timer);
    } else {  
        console.log('用户已经回到了当前页面');  
        autoPlay();
    }  
}
</script>

以上是具体的示例代码,可以参考修改符合自己的业务需求。

标签:function,index,用户,timer,js,---,autoPlay,页面
From: https://www.cnblogs.com/e0yu/p/17831025.html

相关文章

  • 微信小程序--自定义tabbar切换页面时,保留数据方案
    自定义的tabbar组件,每次切换页面时都会重新加载页面和数据,需要通过一些方法把tabbar菜单的数据保留下来,不要每次都请求数据。方案一:在app.js文件里定义全局数据(本次项目采用的是可以在后台管理里配置的数据,所以采用了方案一)1、在app.js文件里定义一个全局变量App({  globa......
  • Nacos共享配置(shared-configs)和扩展配(extension-config)
    原文地址:https://www.jianshu.com/p/8715072d3f4c一、共享配置(shared-configs)和扩展配(extension-config)日常开发中,多个模块可能会有很多共用的配置,比如数据库连接信息,Redis连接信息,RabbitMQ连接信息,监控配置等等。那么此时,我们就希望可以加载多个配置,多个项目共享同一个......
  • Mac Os VS Code 无法升级Cannot update while running on a read-only volume.
    macOSVSCode无法升级,提示“Cannotupdatewhilerunningonaread-onlyvolume“错误提示错误如下:Cannotupdatewhilerunningonaread-onlyvolume.Theapplicationisonaread-onlyvolume.Pleasemovetheapplicationandtryagain.Ifyou’reonmacOSSierr......
  • AND-MEX Walk
    这个题解不错。首先,10万组询问,10万的点和边,能且仅能用并查集判断图的连通性。看到&就要想到非严格单调递减,看到|就要想到非严格单调递增。不难发现样例中答案只有0,1,2,仔细想想,就会发现不可能存在210的序列,因为一旦有了2,末尾就一定是0,和任何数&都不可能是1。换......
  • Sol - P9839
    cnblogs。考场上,在不会特殊性质的情况下,可以先考虑暴力,不仅有保底分,而且方便对拍。测试点1,2大力枚举两个人接下来会出什么牌即可。期望得分\(8\)分。测试点3至5和普通博弈论题目一样,考虑使用动态规划。状态设计和转移平凡,也可以使用记忆化搜索。期望得分\(20\)分。......
  • 微服务系列-Spring Boot使用Open Feign 微服务通信示例
    公众号「架构成长指南」,专注于生产实践、云原生、分布式系统、大数据技术分享。前言在前几个教程中我们已经看到:使用RestTemplate的SpringBoot微服务通信示例使用WebClient的SpringBoot微服务通信示例在本教程中,我们将学习如何使用SpringCloudOpenFeign库在......
  • 幼儿教师工作压力现状及应对策略研究-论文
    一、幼儿教师工作压力概述(一)幼儿教师工作压力概念在本课题研究中,幼儿教师指公立、私立幼儿园教师,含带班教师、保育员、从事行政工作的教师与行政主管,但不包括专职园长、实习教师、代课教师、后勤职员等。幼儿教师在工作环境中,与周围人、事、物的互动过程中,如行政、教学、同事、......
  • 在`tomlkit`库中,`doc.as_string()`和`tomlkit.dumps(doc)`都可以将TOML文档转换为字符
    `tomlkit`模块中的`doc.as_string()`和`tomlkit.dumps(doc)`都是用于将TOML文档转换为字符串的方法。然而,他们之间的主要区别在于他们的使用场景和处理方式。-`doc.as_string()`是`TOMLDocument`类的一个方法,它将`TOMLDocument`对象转换为字符串³。这个方法主要用于在已经有一个......
  • 欢迎解答-Web开发人员的技能和经验熟悉的前端框架是
    当然,我可以为你提供一些典型的面试问题,以评估Web开发人员的技能和经验。请问你对以下问题有何回答?你最熟悉的前端框架是什么?请分享你在具体项目中使用该框架的经验。你对响应式设计和移动优先的开发有何了解?可以分享你在开发这方面的经验吗?请描述你在使用JavaScript编写复杂交互功......
  • isomorphic-fetch库代码示例
    isomorphic-fetch库的爬虫程序。//引入isomorphic-fetch库importfetchfrom'isomorphic-fetch';//设置constproxy=;//定义视频URLconsturl=';//使用fetch获取视频数据fetch(url,{method:'GET',headers:{'Accept':'appl......