web蓝桥杯真题:灯的颜色变化

代码及注释:

javascript 复制代码
// TODO:完善此函数 显示红色颜色的灯
function red() {    //将红色图片元素display显示出来,其他隐藏
    document.querySelector('#defaultlight').style.display = 'none'
    document.querySelector('#redlight').style.display = 'inline-block'
    document.querySelector('#greenlight').style.display = 'none'
}

// TODO:完善此函数  显示绿色颜色的灯
function green() {
    document.querySelector('#defaultlight').style.display = 'none'
    document.querySelector('#redlight').style.display = 'none'
    document.querySelector('#greenlight').style.display = 'inline-block'
}

// TODO:完善此函数
function trafficlights() {
    setTimeout(red(), 3000)    //3秒后执行变红函数
    setTimeout(green(), 6000)
}

trafficlights();

知识点:

1.延时器 setTimeout()

指定毫秒数之后调用函数,只执行一次

2.定时器 setInterval()

指定毫秒数为周期不断调用函数,直到clearInterval()被调用或窗口关闭,setInterval()会返回一个id值可作为clearInterval()的参数

相关推荐
欧阳天风14 分钟前
分段渲染加载页面
前端·fcp
艾小码16 分钟前
TypeScript在前端的实践:类型系统助力大型应用开发
前端·typescript
今禾17 分钟前
前端工程化的范式革命:从 Webpack 的“全量打包”到 Vite 的“按需编译”
前端·webpack·vite
Cache技术分享18 分钟前
168. Java Lambda 表达式 - 专用比较器
前端·后端
颜漠笑年19 分钟前
前端必看:img标签不可忽视的width与height属性
前端·html
GHOME20 分钟前
Vue2知识点详细回顾(以及自己的一些思考和解答)-2
前端·vue.js·面试
摸着石头过河的石头22 分钟前
大模型时代的前端开发新趋势
前端·javascript·ai编程
Bottle41424 分钟前
ServiceWorker 报 MIME 类型错误
前端
吴楷鹏24 分钟前
如何同时打开多个 Chrome 呢?
前端·chrome
鹏程十八少24 分钟前
5. Android FrameWork之安卓14Activity启动流程 万字长文:从点击图标到Activity.onCreate()的每一行代码
前端