复制代码
<!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>
body {
background-color: #0a163b;
font-family: 'Segoe UI', Arial, sans-serif;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
.container {
border: 2px solid white;
padding: 20px;
width: 80%;
max-width: 800px;
border-radius: 12px;
transition: transform 0.3s ease-in-out, box-shadow 0.3s;
}
.container:hover {
transform: scale(1.03);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
.title {
font-size: 28px;
text-align: center;
margin-bottom: 30px;
transition: color 0.3s ease;
}
.title:hover {
color: #00d1ff;
}
.stats {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
/* 通用 stat 样式 */
.stat {
text-align: center;
cursor: pointer;
transition: transform 0.3s ease;
user-select: none;
}
.stat:hover {
transform: translateY(-10px) scale(1.05);
}
.stat.highlighted {
border: 2px solid #00d1ff;
border-radius: 10px;
padding: 5px;
}
/* 圆形区域 */
.circle {
position: relative;
width: 150px;
height: 150px;
margin: 0 auto 10px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
/* 不同颜色主题 */
.stat.green .circle {
background: linear-gradient(135deg, #2a6e35, #4CAF50);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6), 0 0 10px rgba(76, 175, 76, 0.4);
}
.stat.green .number {
color: white;
}
.stat.orange .circle {
background: linear-gradient(135deg, #cc7b19, #FF9800);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 152, 0, 0.4);
}
.stat.orange .number {
color: white;
}
.stat.yellow .circle {
background: linear-gradient(135deg, #f9d74a, #FFEB3B);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 235, 59, 0.5);
}
.stat.yellow .number {
color: #333;
text-shadow: none;
}
.stat.blue .circle {
background: linear-gradient(135deg, #1a5fa3, #2196F3);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6), 0 0 10px rgba(33, 150, 243, 0.4);
}
.stat.blue .number {
color: white;
}
/* 数字和标签样式 */
.number {
font-size: 26px;
font-weight: bold;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.label {
font-size: 16px;
color: #ccc;
}
/* 高亮状态 */
.highlighted .circle {
border: 3px solid #00d1ff;
box-shadow: 0 0 20px rgba(0, 209, 255, 0.6) !important;
}
.highlighted .number {
font-size: 30px;
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="title">网络安全事件总览</div>
<div class="stats">
<!-- 今年攻防事件 -->
<div class="stat green" onclick="highlightStat(this)">
<div class="circle">
<div class="number" id="year">774件</div>
</div>
<div class="label">今年攻防事件</div>
</div>
<!-- 当月攻防事件 -->
<div class="stat orange" onclick="highlightStat(this)">
<div class="circle">
<div class="number" id="month">94件</div>
</div>
<div class="label">当月攻防事件</div>
</div>
<!-- 当日攻防事件 -->
<div class="stat yellow" onclick="highlightStat(this)">
<div class="circle">
<div class="number" id="day">7件</div>
</div>
<div class="label">当日攻防事件</div>
</div>
<!-- 当时攻防事件 -->
<div class="stat blue" onclick="highlightStat(this)">
<div class="circle">
<div class="number" id="hour">2件</div>
</div>
<div class="label">当时攻防事件</div>
</div>
</div>
</div>
<script>
// 初始基准数据
let baseData = {
year: 750,
month: 80,
day: 5,
hour: 1
};
// 模拟数据波动范围
const ranges = {
year: [750, 1000],
month: [80, 350],
day: [5, 60],
hour: [0, 30]
};
// 获取 DOM 元素
const yearEl = document.getElementById('year');
const monthEl = document.getElementById('month');
const dayEl = document.getElementById('day');
const hourEl = document.getElementById('hour');
let cycleCount = 0;
const maxCycles = 12;
let intervalId;
// 生成指定范围内的随机整数
function randomInRange(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 更新数据函数
function updateStats() {
const data = {
year: randomInRange(ranges.year[0], ranges.year[1]),
month: randomInRange(ranges.month[0], ranges.month[1]),
day: randomInRange(ranges.day[0], ranges.day[1]),
hour: randomInRange(ranges.hour[0], ranges.hour[1])
};
// 更新显示
yearEl.textContent = data.year + '件';
monthEl.textContent = data.month + '件';
dayEl.textContent = data.day + '件';
hourEl.textContent = data.hour + '件';
// 添加更新动画
[yearEl, monthEl, dayEl, hourEl].forEach(el => {
el.style.opacity = 0.6;
setTimeout(() => el.style.opacity = 1, 300);
});
cycleCount++;
if (cycleCount >= maxCycles) {
cycleCount = 0;
console.log("数据循环更新完成一轮，重新开始...");
}
}
// 高亮点击的统计项
function highlightStat(element) {
document.querySelectorAll('.stat').forEach(stat => {
stat.classList.remove('highlighted');
});
element.classList.add('highlighted');
setTimeout(() => {
element.classList.remove('highlighted');
}, 2000);
}
// 启动自动更新
function startAutoUpdate() {
updateStats(); // 立即执行一次
intervalId = setInterval(updateStats, 5000); // 每3秒更新
}
// 页面加载完成后启动
window.onload = startAutoUpdate;
// 点击容器可暂停/恢复
let isPaused = false;
document.getElementById('container').addEventListener('click', function(e) {
if (e.target === this) {
if (isPaused) {
intervalId = setInterval(updateStats, 3000);
this.style.borderColor = "white";
isPaused = false;
} else {
clearInterval(intervalId);
this.style.borderColor = "red";
isPaused = true;
}
}
});
</script>
</body>
</html>
