实现页面放切屏功能

牧小七

已于 2024-01-22 17:03:23 修改

阅读量253

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言 jquery

于 2023-04-10 14:04:39 首次发布

本文链接：https://blog.csdn.net/gc666888/article/details/130058756

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

介绍

js和jquery版本失焦，聚焦事件实现切屏功能

js 版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 失焦，聚焦事件  实现切屏功能</title>
</head>
<body>

<script>
    handleScreen();

    var num=0;
    /** 监听用户切屏次数 */
    function handleScreen() {
        console.log("111")
        window.onblur = function() {
            console.log("222")
            num++
        }
        window.onfocus = function() {
            if (num === 3) {
                alert('已离开当前页面' + num + '次，离开5次将强制交卷')
            }
            if (num > 5) {
                alert('由于您离开次数过多，将强制交卷');
                window.onblur = function() {
                    // 这里初始化次数，销毁监听
                    num = 0
                }
            }
        }
    }

</script>
</body>
</html>

jquery版本（推荐）

推荐使用jquery版本，因为我在使用js版本实现正式功能的时候，测试没起作用；但是我在写示例的时候一直是好好的，不知道是什么原因。后来换成jquery实现功能，可以正常使用，然后就使用了jquery版本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 失焦，聚焦事件  实现切屏功能</title>
</head>
<body>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    handleScreen();

    var num=0;
    /** 监听用户切屏次数 */
    function handleScreen() {
        console.log("111")

        //失去焦点
        $(window).blur(function(){
            console.log("222")
            num++
        })

        //获得焦点
        $(window).focus(function(){
            if (num === 3) {
                alert('已离开当前页面' + num + '次，离开5次将强制交卷')
            }
            if (num > 5) {
                alert('由于您离开次数过多，将强制交卷');
                window.onblur = function() {
                    // 这里初始化次数，销毁监听
                    num = 0
                }
            }
        })
    }

</script>
</body>
</html>