ifvisible检测网页最小化或选项卡切换用户无操作代码-html代码-BFW代码库

ifvisible检测网页最小化或选项卡切换用户无操作代码

代码语言：html

所属分类：其他

代码描述：ifvisible检测网页最小化或选项卡切换用户无操作代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.2.3.css">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.2.3.css">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ifvisible.js"></script>

    <script type="text/javascript">

        function d(el) {

            return document.getElementById(el);

        }

        ifvisible.setIdleDuration(30);



        ifvisible.on('statusChanged', function(e) {

            d("result").innerHTML += (e.status+"<br>");

        });



        ifvisible.idle(function() {

            d("result2").innerHTML = "(-_-) Good bye. ZzzZZzz...";

            document.body.style.opacity = 0.5;

        });



        ifvisible.wakeup(function() {

            d("result2").innerHTML = "(O_o) Hey!, you woke me up.";

            document.body.style.opacity = 1;

        });



        ifvisible.onEvery(0.5, function() {

            // Clock, as simple as it gets

            var h = (new Date()).getHours();

            var m = (new Date()).getMinutes();

            var s = (new Date()).getSeconds();

            h = h < 10? "0"+h: h;

            m = m < 10? "0"+m: m;

            s = s < 10? "0"+s: s;

            // Update clock

            d("result3").innerHTML = (h+':'+m+':'+s);

        });



        setInterval(function() {

            var info = ifvisible.getIdleInfo();

            // Give 3% margin to stabilaze user output

            if (info.timeLeftPer < 3) {

                info.timeLeftPer = 0;

                info.timeLeft = ifvisible.getIdleDuration();

            }

            d("seconds").innerHTML = parseInt(info.timeLeft / 1000),
            10;

            d("idlebar").style.width = info.timeLeftPer+'%';

        }, 100);

    </script>

</head>

<body>

    <div class="container-fluid">

        <div class="row-fluid">

            <h1>ifvisible.js test page</h1>

    .........完整代码请登录后点击上方下载按钮下载查看