简单实现侧边栏隐藏与显示
1个月前 ```html 手机端侧边栏（无遮挡） * {margin: 0; padding: 0; box-sizing: bord...
用HTML构建广告与内容结构，CSS固定首屏全屏广告，JS用setInterval倒计时，结束后隐藏广告、显示内容，支持手动跳过。
实现代码（可直接运行）
<!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>
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 广告容器：首屏全屏、层级最高 */
#ad-container {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: #000;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
#ad-img { width: 100%; height: 100%; object-fit: cover; }
/* 倒计时与跳过按钮：右上角悬浮 */
.countdown, .skip {
position: absolute;
top: 20px;
padding: 8px 16px;
border-radius: 20px;
color: #fff;
font-weight: bold;
cursor: pointer;
}
.countdown { right: 80px; background: rgba(0,0,0,0.6); }
.skip { right: 20px; background: #e53935; }
/* 页面内容：默认隐藏，广告结束后显示 */
#main-content {
display: none;
min-height: 100vh;
padding: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<!-- 广告容器 -->
<div id="ad-container">
<img id="ad-img" src="your-ad-image.jpg" alt="首屏广告">
<div class="countdown" id="countdown">5</div>
<div class="skip" id="skip">跳过</div>
</div>
<!-- 页面主内容 -->
<div id="main-content">
<h1>页面主内容</h1>
<p>广告倒计时结束，显示正常内容...</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const ad = document.getElementById('ad-container');
const content = document.getElementById('main-content');
const countdownEl = document.getElementById('countdown');
const skipBtn = document.getElementById('skip');
let timeLeft = 5; // 倒计时5秒
// 倒计时逻辑
const timer = setInterval(() => {
timeLeft--;
countdownEl.textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(timer);
ad.style.display = 'none';
content.style.display = 'block';
}
}, 1000);
// 跳过按钮
skipBtn.addEventListener('click', () => {
clearInterval(timer);
ad.style.display = 'none';
content.style.display = 'block';
});
});
</script>
</body>
</html>#免责声明#
1个月前 ```html 手机端侧边栏（无遮挡） * {margin: 0; padding: 0; box-sizing: bord...
1个月前 用HTML构建广告与内容结构，CSS固定首屏全屏广告，JS用setInterval倒计时，结...
2个月前 实现 Cookie 隐私权限弹窗的核心是「底部固定显示 + 权限选择逻辑 + Cookie 状...
3个月前 这个实现的核心思想是一个插件管理器和一套钩子机制。主程序在关键节点...
1个月前 下面代码是通过AI编写，通过获取其他网页数据在解析过滤后获取的数据。...
1个月前 ![Screenshot_2025_1205_233143.png](https://pic2.ziyuan.wang/user/xunm/2025/12/Screenshot_2025_1205...