用户提问: 网站内容更新提醒代码
Ai回答: 网站内容更新提醒代码
以下是一个简单的网站内容更新提醒系统的实现代码示例，包含前端和后端部分：
前端实现 (HTML + JavaScript)
html
<!DOCTYPE html>
<html lang=zh-CN>
<head>
<meta charset=UTF-8>
<meta name=viewport content=width=device-width, initial-scale=1.0>
<title>内容更新提醒</title>
<style>
.notification {
position: fixed;
bottom: 20px;
right: 20px;
background: #4CAF50;
color: white;
padding: 15px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
display: none;
z-index: 1000;
}
.close-btn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<div class=notification id=updateNotification>
<span id=notificationText>网站内容已更新！</span>
<span class=close-btn onclick=closeNotification()>×</span>
</div>
<script>
// 存储最后检查的时间戳
let lastCheckTime = localStorage.getItem('lastCheckTime') || 0;
// 检查更新的函数
function checkForUpdates() {
fetch('/api/check-updates?since=' + lastCheckTime)
.then(response => response.json())
.then(data => {
if (data.updated) {
showNotification(data.message || '网站内容已更新！');
}
// 更新最后检查时间
lastCheckTime = Date.now();
localStorage.setItem('lastCheckTime', lastCheckTime);
})
.catch(error => console.error('检查更新失败:', error));
}
// 显示通知
function showNotification(message) {
const notification = document.getElementById('updateNotification');
document.getElementById('notificationText').textContent = message;
notification.style.display = 'block';
// 5秒后自动隐藏
setTimeout(() => {
notification.style.display = 'none';
}, 5000);
}
// 关闭通知
function closeNotification() {
document.getElementById('updateNotification').style.display = 'none';
}
// 每5分钟检查一次更新
setInterval(checkForUpdates, 5 * 60 * 1000);
// 页面加载时立即检查一次
window.addEventListener('load', checkForUpdates);
</script>
</body>
</html>
后端实现 (Node.js + Express)
javascript
const express = require('express');
const app = express();
const fs = require('fs');
const path = require('path');
// 存储最后更新时间
let lastUpdateTime = Date.now();
// 模拟内容更新的函数
function simulateContentUpdate() {
lastUpdateTime = Date.now();
console.log(`内容已更新于: ${new Date(lastUpdateTime).toLocaleString()}`);
}
// 每10分钟模拟一次内容更新
setInterval(simulateContentUpdate, 10 * 60 * 1000);
// 检查更新API
app.get('/api/check-updates', (req, res) => {
const since = parseInt(req.query.since) || 0;
if (lastUpdateTime > since) {
res.json({
updated: true,
message: '网站内容已更新！',
updateTime: lastUpdateTime
});
} else {
res.json({
updated: false
});
}
});
// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`服务器运行在 http://localhost:${PORT}`);
});
数据库版本 (使用MySQL)
如果你需要更精确的跟踪内容更新，可以使用数据库：
javascript
const mysql = require('mysql2/promise');
// 创建数据库连接池
const pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: 'password',
database: 'website_updates'
});
// 检查更新API (数据库版本)
app.get('/api/check-updates', async (req, res) => {
const since = parseInt(req.query.since) || 0;
try {
const [rows] = await pool.query(
'SELECT COUNT(*) as count FROM content_updates WHERE update_time > ?',
[new Date(since)]
);
if (rows[0].count > 0) {
const [updates] = await pool.query(
'SELECT * FROM content_updates WHERE update_time > ? ORDER BY update_time DESC LIMIT 1',
[new Date(since)]
);
res.json({
updated: true,
message: updates[0].update_message || '网站内容已更新！',
updateTime: new Date(updates[0].update_time).getTime()
});
} else {
res.json({ updated: false });
}
} catch (error) {
console.error('数据库查询错误:', error);
res.status(500).json({ error: '服务器错误' });
}
});
实现说明
1、前端部分:
使用localStorage存储最后检查时间
定期向服务器发送请求检查更新
显示通知提醒用户
2、后端部分:
跟踪最后更新时间
提供API接口供前端查询
可选数据库版本更精确跟踪
3、扩展功能:
可以添加不同类型更新的分类提醒
可以实现WebSocket实时通知
可以添加用户偏好设置
这个基础实现可以根据你的具体需求进行调整和扩展。
0
IP地址: 44.91.70.79
搜索次数: 11
提问时间: 2025-04-14 01:19:34
热门提问：
ai女友虚拟聊天
ai作图logo
明阳智能
华商核心成长一年持有混合A
鹏华普天债券A
