网站监测工具

微信截图_20250227225742.png (146.35 KB，会记录网址的状态（正常或异常）、响应时间、时间戳以及错误信息（若有）， 可以快速知道自己网站运行状态，显示 5 个网址的高度 */height: calc(5 * (30px + 5px));overflow-y: auto;flex: 1;}li {background-color: #f4f4f9;padding: 10px;margin-bottom: 5px;border-radius: 4px;display: flex;justify-content: space-between;align-items: center;}#log-container {margin-top: 10px;height: calc(11 * (30px + 5px));overflow-y: auto;border: 1px solid #ccc;padding: 10px;border-radius: 4px;}#filter-container {margin-bottom: 10px;}#filter-url {padding: 8px;border: 1px solid #ccc;border-radius: 4px;width: 100%;}/style/headbodydiv class=left-panelh1网站监测工具/h1div class=input-containerinput type=text id=url-input placeholder=输入要监测的网页地址button id=add-url添加网址/button/divdiv class=input-containerlabel for=interval监测间隔 (秒):/labelinput type=number id=interval value=60button id=monitor-button开始监测/button/divul id=url-list/ul/divdiv class=right-paneldiv id=filter-containerlabel for=filter-url筛选网址:/labelselect id=filter-urloption value=全部/option/select/divdiv id=log-container/div/divscriptconst urlInput = document.getElementById('url-input');const addUrlButton = document.getElementById('add-url');const intervalInput = document.getElementById('interval');const monitorButton = document.getElementById('monitor-button');const urlList = document.getElementById('url-list');const logContainer = document.getElementById('log-container');const filterUrlSelect = document.getElementById('filter-url');let urls = [];let logs = [];let intervalId;let isMonitoring = false;const MAX_RETRIES = 3;const MAX_LOGS = 1000;let isNetworkConnected = true;addUrlButton.addEventListener('click'， '电脑网络连接异常');return;}const startTime = performance.now();const controller = new AbortController();const signal = controller.signal;const timeoutId = setTimeout(() = {controller.abort();}，日志会自动滚动到最底部以显示最新信息，点击 “停止监测” 按钮可停止监测，用户可以选择具体的网址进行筛选，网址会被添加到左侧面板的列表中， null);isNetworkConnected = true;}).catch(error = {clearTimeout(timeoutId);const endTime = performance.now();const responseTime = endTime - startTime;if (retryCount MAX_RETRIES) {setTimeout(() = {checkUrl(url， 0，error: errorMessage};logs.push(log);if (logs.length MAX_LOGS) {logs.shift();}displayLogs(filterUrlSelect.value);updateUrlColor(url。

每个网址后面都有一个 “删除” 按钮， Tahoma， 2. 监测功能 设置监测间隔：用户可以在输入框中设置监测间隔时间（单位为秒）， 日志显示：右侧面板的日志容器会显示所有或筛选后的监测日志， 3. 日志记录与显示功能 日志记录：每次对网址进行检测后。

1500);alert('请输入有效的网址');return;}if (!url.startsWith('http://') !url.startsWith('https://') !url.startsWith('www.')) {url = 'https://' + url;} else if (url.startsWith('www.')) {url = 'https://' + url;}if (!/^https?:\/\/.+/i.test(url)) {urlInput.classList.add('invalid');setTimeout(() = {urlInput.classList.remove('invalid');}， 5000);const requestOptions = {mode: 'cors'，工具会对输入的网址进行格式验证。

如果请求失败，日志记录会存储在 logs 数组中。

开始 / 停止监测：点击 “开始监测” 按钮，.right-panel {flex: 1;padding: 20px;background-color: #fff;border-radius: 8px;box-shadow: 0 0 10px rgba(0，正常状态的日志为黑色，responseTime: responseTime!== null? Math.round(responseTime) : null，请检查网络连接或代理设置';isNetworkConnected = false;}handleLog(url，headers: {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML，工具会立即对所有已添加的网址进行一次检测。

会移除最早的日志记录。

sans-serif;background-color: #f9f9f9;display: flex;margin: 0;padding: 0;height: 100vh;}/* 调整左右面板的高度。

点击 “添加网址” 按钮，之后按照设置的监测间隔时间循环检测，当日志数量超过 1000 条时， () = {let url = urlInput.value.trim();if (!url) {urlInput.classList.add('invalid');setTimeout(() = {urlInput.classList.remove('invalid');}， responseTime， status === '正常');}function updateUrlColor(url，则记录错误日志，。

initial-scale=1.0title网站监测工具/titlestylebody {font-family: 'Segoe UI'。

timestamp: new Date().toLocaleString()，只显示该网址的监测日志， responseTime， retryCount) {if (!isNetworkConnected) {handleLog(url，signal: signal。

0.1);margin: 20px;height: calc(100vh - 40px - 30px);overflow-y: auto;display: flex;flex-direction: column;}.right-panel {flex: 2;}h1 {color: #333;margin-bottom: 20px;text-align: center;}.input-container {margin-bottom: 15px;display: flex;align-items: center;}input {padding: 10px;margin-right: 10px;border: 1px solid #ccc;border-radius: 4px;flex: 1;transition: all 0.3s ease;}input.invalid {color: red;animation: shake 0.5s ease-in-out 3;}@keyframes shake {0% {transform: translateX(0);}25% {transform: translateX(-5px);}50% {transform: translateX(5px);}75% {transform: translateX(-5px);}100% {transform: translateX(0);}}button {padding: 10px 15px;background-color: #007BFF;color: white;border: none;border-radius: 4px;cursor: pointer;transition: background-color 0.3s ease;}button:hover {background-color: #0056b3;}#monitor-button.started {background-color: #dc3545;}ul {list-style-type: none;padding: 0;margin-top: 10px;/* 假设每个网址高度约 30px， 本帖最后由 苏紫方璇 于 2025-3-2 16:56 编辑 这个是我自己做的一个用来监测网站是否可以正常访问，单文件双击 网站监测工具.html 运行， like Gecko) Chrome/91.0.4472.124 Safari/537.36'}};fetch(url。

requestOptions).then(() = {clearTimeout(timeoutId);const endTime = performance.now();const responseTime = endTime - startTime;handleLog(url， 1);urlList.removeChild(li);const options = Array.from(filterUrlSelect.options);const optionToRemove = options.find(option = option.value === url);if (optionToRemove) {filterUrlSelect.removeChild(optionToRemove);}}});li.appendChild(deleteButton);urlList.appendChild(li);urlInput.value = '';const option = document.createElement('option');option.value = url;option.textContent = url;filterUrlSelect.appendChild(option);});monitorButton.addEventListener('click'， errorMessage);}});}function handleLog(url， retryCount + 1);}， 重试机制：在进行网址检测时。

1500);alert('请输入以 、https:// 或 开头的有效网址');return;}urlInput.classList.remove('invalid');urls.push(url);const li = document.createElement('li');li.textContent = url;const deleteButton = document.createElement('button');deleteButton.textContent = '删除';deleteButton.addEventListener('click'， Verdana， null，默认值为 60 秒。

errorMessage) {let status;if (errorMessage === '电脑网络连接异常') {status = '异常';} else if (responseTime!== null responseTime 800) {status = '正常';errorMessage = null;} else {status = '异常';if (!errorMessage) {errorMessage = `响应时间过长: ${responseTime} 毫秒`;}}const log = {url， newInterval);}if (isNetworkConnected) {urls.forEach(url = {checkUrl(url。

筛选网址：右侧面板有一个 “筛选网址” 的下拉框，同时也会从筛选下拉框中移除该网址选项， interval);monitorButton.classList.add('started');monitorButton.textContent = '停止监测';isMonitoring = true;} else {clearInterval(intervalId);monitorButton.classList.remove('started');monitorButton.textContent = '开始监测';isMonitoring = false;}});filterUrlSelect.addEventListener('change'，status， 下载次数: 0) 下载附件 2025-2-27 23:04 上传 微信截图_20250227230556.png (148.38 KB，验证通过后， Geneva。

() = {const index = urls.indexOf(url);if (index -1) {urls.splice(index。

点击该按钮可以将对应的网址从监测列表中移除。

删除网址：在左侧面板的网址列表中， interval) {// 先立即执行一次监测urls.forEach(url = {checkUrl(url， 1. 网址管理功能 添加网址：用户可以在输入框中输入要监测的网页地址， 1000);} else {let errorMessage = error.message;if (error.name === 'AbortError') {errorMessage = '请求超时';} else if (error.message.includes('NetworkError')) {errorMessage = '网络错误，也可以选择 “全部” 来显示所有网址的监测日志， 0，若重试后仍失败，减去一行日志的大致高度（假设为 30px） */.left-panel。

0);});}， 0);});}}。

下载次数: 0) 下载附件 2025-2-27 23:05 上传 [HTML] 纯文本查看 复制代码 !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta name=viewport content=width=device-width， 0);});// 按间隔时间循环检测intervalId = setInterval(() = {const newInterval = parseInt(intervalInput.value) * 1000;if (newInterval!== interval) {clearInterval(intervalId);intervalId = setInterval(() = {urls.forEach(url = {checkUrl(url， () = {const selectedUrl = filterUrlSelect.value;displayLogs(selectedUrl);});function monitorUrlsImmediately(urls，并且列表项后有 “删除” 按钮， interval);}function checkUrl(url。

0);});}，会进行最多 3 次重试。

异常状态的日志为红色， 0);});// 再按间隔时间循环监测intervalId = setInterval(() = {urls.forEach(url = {checkUrl(url。

() = {if (!isMonitoring) {const interval = parseInt(intervalInput.value) * 1000;// 立即检测一次所有添加的网址urls.forEach(url = {checkUrl(url， isNormal) {const listItems = urlList.getElementsByTagName('li');for (let i = 0; i listItems.length; i++) {if (listItems[i].textContent.includes(url)) {if (isNormal) {listItems[i].style.color = 'black';} else {listItems[i].style.color = 'red';}break;}}}function displayLogs(filterUrl) {logContainer.innerHTML = '';const filteredLogs = filterUrl? logs.filter(log = log.url === filterUrl) : logs;filteredLogs.forEach(log = {const logEntry = document.createElement('p');let statusColor;if (log.status === '正常') {statusColor = 'black';} else {statusColor = 'red';}logEntry.style.color = statusColor;logEntry.textContent = `${log.timestamp} - ${log.url} - 状态: ${log.status}`;if (log.responseTime!== null) {logEntry.textContent += ` - 响应时间: ${log.responseTime} 毫秒`;}if (log.error) {logEntry.textContent += ` - 错误信息: ${log.error}`;}logContainer.appendChild(logEntry);});// 自动滚动到最底部显示最新信息logContainer.scrollTop = logContainer.scrollHeight;}/script/body/html 网站监测工具.zip 2025-2-27 23:06 上传 点击文件名下载附件 下载积分: 吾爱币 -1 CB ， responseTime。