登录 注册

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

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

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

  • Q&A

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

    8109 引用 • 36991 回帖 • 161 关注
1 收藏
22 回帖
10
7
4
6.9k 29 522 2.2k 1.2k 563 11 1.0k 1.2k

相关帖子

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

近期热议

推荐标签 标签

  • 爬虫

    网络爬虫（Spider、Crawler），是一种按照一定的规则，自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • CentOS

    CentOS（Community Enterprise Operating System）是 Linux 发行版之一，它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码，因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • Q&A

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

    8109 引用 • 36991 回帖 • 161 关注
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 166 关注
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 629 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台，致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验，及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 1 关注
  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 474 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    15 引用 • 122 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库，专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 62 关注
  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1063 引用 • 3453 回帖 • 203 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖 • 1 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    287 引用 • 4484 回帖 • 669 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 154 关注
  • LaTeX

    LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 65 关注
  • 生活

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

    230 引用 • 1454 回帖
  • Mac

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

    166 引用 • 595 回帖
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 1 关注
  • 微软

    微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 351 关注
  • golang

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

    497 引用 • 1387 回帖 • 285 关注
  • Log4j

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

    20 引用 • 18 回帖 • 31 关注
  • 代码片段

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

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

    69 引用 • 372 回帖 • 1 关注

最新标签