AI摸鱼工具 摸鱼工具网

使用HTML与JavaScript打造网页监控自动弹窗提醒教程

时间： 作者： 阅读：63
在日常工作中，我们常常需要监控某个网页的变化，比如票务网站放票、商品价格更新或技术文档的版本升级。手动刷新网页不仅低效，还容易错过关键时机。本文将教你如何利用纯前端技术——HTML和JavaScript，打造一个简易的网页监控自动弹窗提醒系统。即使没有后端服务器，也能实现本地化的定时检查和提醒功能，有效提升“摸鱼”效率（当然是在工作间隙合理利用哦）。 准备工作 在开始之前，确保你具备以下基础：

在日常工作中，我们常常需要监控某个网页的变化，比如票务网站放票、商品价格更新或技术文档的版本升级。手动刷新网页不仅低效，还容易错过关键时机。本文将教你如何利用纯前端技术——HTML和JavaScript，打造一个简易的网页监控自动弹窗提醒系统。即使没有后端服务器，也能实现本地化的定时检查和提醒功能，有效提升“摸鱼”效率（当然是在工作间隙合理利用哦）。

准备工作

在开始之前，确保你具备以下基础：

1. 文本编辑器： 如VS Code、Sublime Text或Notepad++。
2. 浏览器： Chrome或Edge（推荐，支持CORS跨域请求测试）。
3. 基础HTML/JavaScript知识： 了解变量、函数和DOM操作。

步骤1：创建项目文件

首先，在本地新建一个文件夹，命名为`web-monitor`。然后在其中创建两个文件：

index.html       // 主界面
monitor.js       // 监控逻辑

打开`index.html`，填入基础HTML结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网页监控弹窗提醒器</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #container { max-width: 600px; margin: auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; }
        input, button{ margin: 5px; padding: 8px; width:90%;}
        #status { margin-top: 10px; }
    </style>
</head>
<body>
    <div id="container">
        <h2>网页监控自动弹窗提醒</h2>
        <label>监控网址：<input type="text" id="urlInput" value="https://example.com" /></label><br/>
        <label>检查间隔（秒）：<input type="number" id="intervalInput" value="30" min="5" /></label><br/>
        <label>监控关键词：<input type="text" id="keywordInput" placeholder="留空则监控页面内容变化" /></label><br/>
        <button onclick="startMonitoring()">开始监控</button>
        <button onclick="stopMonitoring()">停止监控</button>
        <div id="status">状态：就绪</div>
    </div>
    <script src="monitor.js"></script>
</body>
</html>

这个页面提供了输入网址、设置时间间隔和关键词的界面。用户点击“开始监控”后，系统将定期检查指定网页。

步骤2：编写核心监控逻辑

在`monitor.js`中，实现基于Ajax的HTTP请求和对比逻辑。由于浏览器同源策略，我们需要使用代理（如CORS-Anywhere）或直接监控同源页面。这里展示通用的FETCH请求写法：

let monitorInterval = null;
let previousContent = '';

async function fetchPageContent(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) throw new Error('网络请求失败');
        return await response.text();
    } catch (error) {
        console.error('获取页面失败：', error);
        showAlert('请求失败，请检查网址或网络！');
        return null;
    }
}

function showAlert(message) {
    // 使用浏览器原生弹窗
    alert('🔔 监控提醒：' + message);
    // 可选：使用自定义弹窗代替alert以美化体验
}

function checkContentChanged(currentContent, keyword) {
    if (keyword) {
        // 关键词模式：检测是否包含指定字符串
        if (currentContent.includes(keyword)) {
            showAlert('检测到关键词："' + keyword + '"');
            return true;
        }
    } else {
        // 全内容对比模式：如果内容与上次不同，视为变化
        if (previousContent !== '' && currentContent !== previousContent) {
            showAlert('页面内容已更新！');
            previousContent = currentContent;
            return true;
        }
    }
    // 更新缓存
    previousContent = currentContent;
    return false;
}

async function monitoringTask() {
    const url = document.getElementById('urlInput').value.trim();
    const keyword = document.getElementById('keywordInput').value.trim();
    
    if (!url) {
        showAlert('请输入有效的网址');
        return;
    }
    
    const currentContent = await fetchPageContent(url);
    if (currentContent) {
        checkContentChanged(currentContent, keyword);
        document.getElementById('status').innerText = '状态：最后检查时间 ' + new Date().toLocaleTimeString();
    }
}

function startMonitoring() {
    if (monitorInterval) {
        showAlert('监控已运行，请先停止再重新启动。');
        return;
    }
    const interval = parseInt(document.getElementById('intervalInput').value) * 1000;
    if (interval < 5000) {
        showAlert('间隔时间至少5秒');
        return;
    }
    // 立即执行一次
    monitoringTask();
    monitorInterval = setInterval(monitoringTask, interval);
    document.getElementById('status').innerText = '状态：监控运行中（间隔' + (interval/1000) + '秒）';
}

function stopMonitoring() {
    if (monitorInterval) {
        clearInterval(monitorInterval);
        monitorInterval = null;
        document.getElementById('status').innerText = '状态：监控已停止';
    } else {
        showAlert('没有正在运行的监控任务');
    }
}

这段代码实现了三个核心功能：

- fetchPageContent： 异步获取指定URL的HTML源码。
- checkContentChanged： 判断内容是否发生变化或包含关键词，并触发弹窗提醒。
- monitoringTask： 封装整个检查流程，由定时器循环调用。

步骤3：处理跨域问题与运行测试

由于安全限制，直接使用`fetch`请求非同源网页会被浏览器阻止。解决方案有以下几种：

方案A：使用代理服务器

例如部署一个简单的Node.js代理，或利用公开的CORS代理（如`https://cors-anywhere.herokuapp.com/`）。修改`monitor.js`中的`fetch`地址：

const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
const targetUrl = proxyUrl + url;
const response = await fetch(targetUrl);

注意：这种方法依赖外部服务稳定性，建议用于测试环境。

方案B：监控同源页面

如果你的监控目标是同一域名下的页面（例如公司内部系统），直接使用即可。例如输入`http://localhost:8080/data.html`。

方案C：使用Chrome扩展权限

对于高级用户，可开发Chrome扩展绕过CORS限制，但本教程暂不涉及。

运行测试时，先点击“开始监控”，等待预设时间，观察页面状态、弹窗提醒是否触发。

步骤4：增强用户体验与功能扩展

基础功能完成后，可以添加以下特性提升工具实用性：

1. 任务持久化： 使用`localStorage`保存用户输入的网址和间隔，避免每次刷新丢失。
2. 日志记录： 在页面中显示最近几次检查结果，包括时间戳和变化详情。
3. 声音提醒： 除了弹窗，播放音频文件或浏览器通知（Notification API）。示例：

function showNotification(message) {
    if (Notification.permission === 'granted') {
        new Notification('网页监控', { body: message });
    } else if (Notification.permission !== 'denied') {
        Notification.requestPermission().then(permission => {
            if (permission === 'granted') {
                new Notification('网页监控', { body: message });
            }
        });
    }
}
4. 多任务监控： 设计表格展示多个监控目标，每个任务独立间隔和控制开关。
5. 精准对比： 使用`diff`算法（如`diff-match-patch`库）或计算页面文本长度、Hash值，减少误报。

步骤5：注意事项与优化建议

在实际使用中，请留意以下几点：

- 浏览器限制： 长时间运行定时器，浏览器可能因节能策略降低执行频率，建议合理设置间隔（如60秒以上）。
- 性能影响： 频繁请求高频率更新页面会增加设备负载，监控页面时建议选择性提取关键ID或类名内容。
- 隐私与法律： 确保监控的是公开信息或有授权的内容，避免侵犯版权或违反网站服务条款。
- 使用场景： 此工具适合内部测试、个人学习或“摸鱼”效率提升，不适合生产级监控系统。

总结

通过以上步骤，你已成功搭建了一个轻量级的网页监控自动弹窗提醒工具。它无需后端服务，仅需浏览器即可运行，特别适合那些需要频繁刷新页面以捕获变化的场景——比如抢购机票、监控优惠券发放或跟踪开源项目更新。当然，善用技术提高工作效率才是正道，偶尔“摸鱼”时可以借助它解放双手，保持专注。未来你可以根据需求，结合Web Worker、服务端推送或Electron来打造更强大的监控应用。

现在，打开你的编辑器，亲手实现这个小工具吧！

免责声明：本文内容来源于公开资料、用户提交或站内整理，仅供学习与参考，不构成任何投资、医疗、法律或专业建议。请结合实际情况自行判断，相关风险由使用者自行承担。
上一篇
下一篇

相关文章