页面无操作后提示信息

最新推荐文章于 2024-10-07 20:56:37 发布

今天吃了嘛o

最新推荐文章于 2024-10-07 20:56:37 发布

阅读量399

点赞数 8

文章标签：前端

本文链接：https://blog.csdn.net/weixin_45535843/article/details/136702236

版权

在前端实现页面无操作十秒后提示信息的功能，通常可以通过JavaScript来完成。这里提供一个简单的示例，使用setTimeout函数来延迟执行提示信息的操作，同时使用mousemove、keydown和scroll等事件来重置计时器，以便在用户与页面交互时不会显示提示信息。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面无操作提示示例</title>
<script>
    // 设置无操作提示的超时时间（单位：秒）
    var timeout;
    var timeoutInSeconds = 10;

    // 提示信息的函数
    function showInfo() {
        alert('您已经十秒没有操作页面了！');
    }

    // 重置计时器的函数
    function resetTimer() {
        clearTimeout(timeout);
        timeout = setTimeout(showInfo, timeoutInSeconds * 1000);
    }

    // 绑定事件监听器
    document.onmousemove = resetTimer; // 鼠标移动
    document.onkeydown = resetTimer; // 按键按下
    document.onscroll = resetTimer; // 页面滚动

    // 页面加载完成后初始化计时器
    window.onload = function() {
        timeout = setTimeout(showInfo, timeoutInSeconds * 1000);
    };
</script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>