一、实现倒计时
1. 在编辑器中构建实现场景，大纲树中的两个普通容器分别代表首页内容和开屏图片，代码区的变量 remainingSeconds 代表倒计时秒数，javascript 方法 setInterval 实现倒计时逻辑。
2. 更改普通容器命名，使大纲书结构更加清晰。
3. 开屏图片全屏样式设置，图片布局模式选择拉伸填满，css 自定义 wdith:100%;height:100vh。
4. 文本-倒计时设置定位样式以及绑定变量 remainingSeconds。
4.1 定位选择绝对，位置距离如下。
4.2 文本内容绑定表达式。
5. 文本-跳过设置背景颜色以及定位方式。
注意：说明：
注意：倒计时变量 remainingSeconds 为数字类型，默认值是5（以倒计时5秒为例）。
6. 自定义 js 方法 setInterval 实现倒计时逻辑，代码中的 setInterval(updateCountdown, 1000)，setInterval 为 js 方法，用于周期性地执行指定的函数或代码片段，后面参数1000代表1秒执行一次。
代码展示：
export default function({event, data}) { let remainingSeconds = $w.page.dataset.state.remainingSeconds; function updateCountdown() { console.log(`倒计时: ${remainingSeconds} 秒`); if (remainingSeconds > 0) { remainingSeconds -= 1; $w.page.dataset.state.remainingSeconds=remainingSeconds } else { console.log('倒计时结束'); clearInterval(interval); } } updateCountdown(); const interval = setInterval(updateCountdown, 1000);//setInterval为js方法，用于周期性地执行指定的函数或代码片段，}
7. 页面加载事件绑定倒计时方法。
选择 setInterval 方法，并保存。
8. 设置普通容器-首页和普通容器-开屏的动态显隐。
·普通容器-首页：$w.If($w.page.dataset.state.remainingSeconds<1, true, false) 表示倒计时为0秒的时候，则显示首页内容，隐藏开屏内容。
·普通容器-开屏：$w.If($w.page.dataset.state.remainingSeconds>=1, true, false) 表示倒计时为大于或等于1秒的时候，则显示开屏内容，隐藏首页内容。
9. 开屏倒计时效果展示。
二、实现倒计时跳过
1. 新建布尔值变量 isClear，默认值 false，用来承载用户是否点击跳过的状态值。
2. 跳过事件执行变量赋值。
3. js 方法 setInterval 增加清除定时器逻辑。
export default function ({ event, data }) { let remainingSeconds = $w.page.dataset.state.remainingSeconds; function updateCountdown() { console.log(`倒计时: ${remainingSeconds} 秒`); if (remainingSeconds > 0) { //点击跳过，则清除定时器 if ($w.page.dataset.state.isClear) { clearInterval(interval) console.log("已清除定时器"); } remainingSeconds -= 1; $w.page.dataset.state.remainingSeconds = remainingSeconds } else { //console.log('倒计时结束'); clearInterval(interval); } } updateCountdown(); const interval = setInterval(updateCountdown, 1000);}
4. 普通容器-首页和普通容器显隐需要判断定时器状态。
4.1 定时器如果已经清除，说明点击了跳过，则直接展示首页内容。
4.2 定时器没有被清除，正常倒计时。
5. 倒计时过程中，单击跳过会直接展示首页内容。