登录 注册

请问页面怎么知道你正在看它？

本贴最后更新于 3544 天前，其中的信息可能已经天翻地覆

我记得以前碰到过一种看广告的网页，要你盯着它看几十秒就给你……（好处）
如果切换到其它网页，计时器就会自动停止，切换回来才继续计时
我（前端小白）现在想把这种技术用到别的地方，请问这是怎么实现的？

  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    9746 引用 • 44331 回帖 • 87 关注
1 收藏
22 回帖
10
7
4
7.2k 30 522 2.3k 1.3k 563 11 1.0k 1.4k

相关帖子

22 回帖
请问页面怎么知道你正在看它？

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • 88250 •
    订阅者

    @Vanessa

  • cppgeek •
    作者

    是要我 @Vanessa？

  • 88250 •
    订阅者

    我已经 @ 她了，她是专门做前端的，应该了解这个

  • cppgeek •
    作者

    我发帖时没注意是 markdown 格式的，没换行，可以修改不？

  • 88250 •
    订阅者

    可以修改啊，你更新就行

  • cppgeek •
    作者

    可以编辑，没法更新，只有预览和编辑
    点编辑出现：文章标题长度 1-255

  • 88250 •
    订阅者

    强制刷新一下编辑页面，然后再试试

  • Vanessa •
    订阅者 付费者

    这个还真没研究过啊。 要是放个 QQ 对话框遮在上面也知道么？

    可以吧网址发来我研究研究。

  • cppgeek •
    作者

    有段时间了，网址我找找
    好像只是网页切换会停止倒计时

  • Vanessa •
    订阅者 付费者

    @cppgeek 那滚动到底部，广告看不见了，还会倒计时么？

  • cppgeek •
    作者

    找到一个：btcclicks.com，你用我的账号登陆：cppgeek，密码 Bitcoin12345
    登陆后选 Surf Ads，下面会有好多广告，看 10 秒赚好多毫比特币，点一个进去后等它完全载入后（国外网站，载入很慢）上面就有 10 秒倒计时的进度条
    如果此时你切换到其它网页，这个进度条就会暂停，直到你回到这个广告页，我用 chrome 和 opera 试了都是这样

  • Vanessa •
    订阅者 付费者

  • Vanessa •
    订阅者 付费者

    他那个是个 flash 么？ 看不了，不过根据你的需求你可以试下

    document.addEventListener("visibilitychange", function() {
	console.log( document.visibilityState );
});
​
  • cppgeek •
    作者

    一直没登上？我刚又邮箱验证了一下，应该可以了
    不过你的答案看上去挺靠谱，可能就是它

  • cppgeek •
    作者

    不用试了，你说对了
    http://davidwalsh.name/demo/page-visibility.php
    这个测试页面是当前页标题就是 visible，不是当前页标题就是 hidden

  • 88250 •
    订阅者

    楼主上传个头像吧....

  • cppgeek •
    作者

    upload error

  • 88250 •
    订阅者

    刷新然后再试试，应该可以的，你看我都换了~

  • yangyujiao •

    现在这样的用的很多，跟视频一个性质的吧，我们家那边考驾照的理论要上网学习，比如一节课 40 分钟，你必须把页面停在那里，只要切换了，就会重新计时，哪怕你不看，但是你必须把页面停留在那里等着视频播放完毕。

  • cppgeek •
    作者

    @yangyujiao 这个功能是很实用

  • cppgeek •
    作者

    @88250 chrome 可以设置头像，opera 不行

  • 88250 •
    订阅者

    哦，好的，多谢反馈，等有空做下兼容性

请输入回帖内容 ...
cppgeek
来自长沙的程序员
回帖
25
 帖子
4
 积分
2700

近期热议

推荐标签 标签

  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 91 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目，是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台，为开发者提供便利的 API 接口来调用服务，让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 499 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖 • 1 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 1 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机，如：iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    168 引用 • 597 回帖
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。

    56 引用 • 85 回帖
  • H2

    H2 是一个开源的嵌入式数据库引擎，采用 Java 语言编写，不受平台的限制，同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式，可以兼容一些主流的数据库，因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 667 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 1 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    91 引用 • 59 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    168 引用 • 1141 回帖 • 1 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。

    28 引用 • 226 回帖 • 128 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖
  • Word
    13 引用 • 41 回帖
  • 互联网

    互联网（Internet），又称网际网络，或音译因特网、英特网。互联网始于 1969 年美国的阿帕网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

    99 引用 • 367 回帖 • 1 关注
  • CAP

    CAP 指的是在一个分布式系统中， Consistency（一致性）、 Availability（可用性）、Partition tolerance（分区容错性），三者不可兼得。

    12 引用 • 5 回帖 • 631 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年，是中国的 IT 社区和服务平台，为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务，满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖 • 2 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言，可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克（Rob Pike）说：我们之所以开发 Go，是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    499 引用 • 1395 回帖 • 247 关注
  • Excel
    31 引用 • 28 回帖 • 1 关注
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 77 关注
  • API

    应用程序编程接口（Application Programming Interface）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

    79 引用 • 431 回帖 • 1 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高，单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 107 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 28 关注
  • Quicker

    Quicker 您的指尖工具箱！操作更少，收获更多！

    37 引用 • 157 回帖
  • sts
    2 引用 • 2 回帖 • 230 关注
  • 设计模式

    设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖 • 1 关注

最新标签