32 lines
979 B
JavaScript
32 lines
979 B
JavaScript
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
// 标签切换功能
|
||
|
|
const tabs = document.querySelectorAll('.tab');
|
||
|
|
tabs.forEach(tab => {
|
||
|
|
tab.addEventListener('click', function() {
|
||
|
|
tabs.forEach(t => t.classList.remove('active'));
|
||
|
|
this.classList.add('active');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 柱状图入场动画
|
||
|
|
const bars = document.querySelectorAll('.bar');
|
||
|
|
bars.forEach((bar, index) => {
|
||
|
|
const height = bar.style.height;
|
||
|
|
bar.style.height = '0';
|
||
|
|
setTimeout(() => {
|
||
|
|
bar.style.height = height;
|
||
|
|
}, 200 + index * 100);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 进度条动画
|
||
|
|
const progressBars = document.querySelectorAll('.progress-bar');
|
||
|
|
progressBars.forEach(bar => {
|
||
|
|
const width = bar.style.width;
|
||
|
|
bar.style.width = '0';
|
||
|
|
setTimeout(() => {
|
||
|
|
bar.style.width = width;
|
||
|
|
}, 500);
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('HoloLake 成本控制系统已加载');
|
||
|
|
});
|