用js实现页面暂停
使用CSS动画控制暂停
通过JavaScript动态切换CSS的animation-play-state属性实现暂停效果。适用于CSS动画场景：
const element = document.getElementById('target');
element.style.animationPlayState = 'paused'; // 暂停
element.style.animationPlayState = 'running'; // 恢复暂停视频/音频元素
对媒体元素使用HTML5 Media API进行控制：
const media = document.querySelector('video');
media.pause(); // 暂停播放
media.play(); // 继续播放冻结定时器
清除所有正在运行的定时器实现页面"冻结"效果：
// 存储所有定时器ID
const timers = [];
timers.push(setInterval(()=>console.log('timer'), 1000));
// 暂停所有定时器
timers.forEach(timer => clearInterval(timer));禁用事件监听
临时移除事件监听器阻止交互：
function handleClick(e) { console.log('clicked'); }
element.addEventListener('click', handleClick);
// 暂停交互
element.removeEventListener('click', handleClick);覆盖遮罩层
创建半透明遮罩层阻止页面操作：
const overlay = document.createElement('div');
overlay.style = `
position: fixed;
top:0; left:0;
width:100%; height:100%;
background: rgba(0,0,0,0.5);
z-index: 9999;
`;
document.body.appendChild(overlay);
// 恢复时执行
overlay.remove();冻结CSS过渡
通过移除过渡类名停止动画效果：
element.classList.remove('active'); // 移除动画类
setTimeout(() => {
element.classList.add('active'); // 恢复动画
}, 1000);
