电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

利用js實(shí)現(xiàn)簡易紅綠燈

瀏覽:110日期:2024-04-16 10:02:26

HTML代碼:

在一個(gè)div容器內(nèi),設(shè)置3個(gè)span

<body><div id='i1'> <span class='light red_light'></span> <span class='light yellow_light'></span> <span class='light green_light'></span></div>

CSS代碼:

<style> .red_light { width: 200px; height: 200px; border-radius: 50%; margin-left: 10px; display: inline-block; background-color: red; } .yellow_light { width: 200px; height: 200px; border-radius: 50%; margin-left: 10px; display: inline-block; background-color: yellow; } .green_light { width: 200px; height: 200px; border-radius: 50%; margin-left: 10px; display: inline-block; background-color: green; } .light { width: 200px; height: 200px; background-color: #777777; border-radius: 50%; margin-left: 10px; display: inline-block; } #i1 { width: 660px; height: 200px; margin: 0 auto; border: black 10px solid; } </style>

JS代碼

<script> function l() { r_l()//紅燈亮 setTimeout(y_l, 1000);//黃燈一秒后亮 setTimeout(r_l, 1000);//黃燈亮的同時(shí)關(guān)閉紅燈 setTimeout(g_l, 2000);//綠燈兩秒后亮 setTimeout(y_l, 2000);//綠燈亮,黃燈熄 setTimeout(g_l, 3000);//三秒后,紅燈熄 } function r_l() { //獲取紅燈 let r = document.getElementsByClassName(’red_light’)[0]; //toggle函數(shù),如果有該屬性,則去除,沒有該屬性,則添加 r.classList.toggle(’light’) } function g_l() { //同上 let r = document.getElementsByClassName(’green_light’)[0]; r.classList.toggle(’light’) } function y_l() { //同上 let r = document.getElementsByClassName(’yellow_light’)[0]; r.classList.toggle(’light’) } //紅燈10秒,黃燈2秒,綠燈10秒 l(); //先執(zhí)行函數(shù) window.onload = function () { t1 = setInterval(l, 3000)//每隔三秒重復(fù)執(zhí)行函數(shù) };//每隔三秒的時(shí)間是因?yàn)槊總€(gè)燈各閃一秒,如果改變了燈的持續(xù)時(shí)間,循環(huán)時(shí)間也要修改</script>

運(yùn)行效果

利用js實(shí)現(xiàn)簡易紅綠燈

以上就是利用js實(shí)現(xiàn)簡易紅綠燈的詳細(xì)內(nèi)容,更多關(guān)于js 實(shí)現(xiàn)紅綠燈的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 天长市晶耀仪表有限公司| 合肥宠物店装修_合肥宠物美容院装修_合肥宠物医院设计装修公司-安徽盛世和居装饰 | 工装定制/做厂家/公司_工装订做/制价格/费用-北京圣达信工装 | 石膏基自流平砂浆厂家-高强石膏基保温隔声自流平-轻质抹灰石膏粉砂浆批发-永康市汇利建设有限公司 | 皮带式输送机械|链板式输送机|不锈钢输送机|网带输送机械设备——青岛鸿儒机械有限公司 | 危废处理系统,水泥厂DCS集散控制系统,石灰窑设备自动化控制系统-淄博正展工控设备 | CPSE安博会| 高低温万能试验机_拉力试验机_拉伸试验机-馥勒仪器科技(上海)有限公司 | 密集架-密集柜厂家-智能档案密集架-自动选层柜订做-河北风顺金属制品有限公司 | 砖机托板价格|免烧砖托板|空心砖托板厂家_山东宏升砖机托板厂 | 英语词典_成语词典_日语词典_法语词典_在线词典网 | 水厂自动化-水厂控制系统-泵站自动化|控制系统-闸门自动化控制-济南华通中控科技有限公司 | 武汉高低温试验机-现货恒温恒湿试验箱-高低温湿热交变箱价格-湖北高天试验设备 | 太阳能发电系统-太阳能逆变器,控制器-河北沐天太阳能科技首页 | 广东风淋室_广东风淋室厂家_广东风淋室价格_广州开源_传递窗_FFU-广州开源净化科技有限公司 | 临沂招聘网_人才市场_招聘信息_求职招聘找工作请认准【马头商标】 | 电动车头盔厂家_赠品头盔_安全帽批发_山东摩托车头盔—临沂承福头盔 | 苏商学院官网 - 江苏地区唯一一家企业家自办的前瞻型、实操型商学院 | 邢台人才网_邢台招聘网_邢台123招聘【智达人才网】 | 快速门厂家批发_PVC快速卷帘门_高速门_高速卷帘门-广州万盛门业 快干水泥|桥梁伸缩缝止水胶|伸缩缝装置生产厂家-广东广航交通科技有限公司 | 扬尘监测_扬尘监测系统_带证扬尘监测设备 - 郑州港迪科技有限公司 | 劳动法网-专业的劳动法和劳动争议仲裁服务网 | 北京模型公司-军事模型-工业模型制作-北京百艺模型沙盘公司 | 济南轻型钢结构/济南铁艺护栏/济南铁艺大门-济南燕翔铁艺制品有限公司 | 拖鞋定制厂家-品牌拖鞋代加工厂-振扬实业中国高端拖鞋大型制造商 | 澳洁干洗店加盟-洗衣店干洗连锁「澳洁干洗免费一对一贴心服务」 干洗加盟网-洗衣店品牌排行-干洗设备价格-干洗连锁加盟指南 | 吲哚菁绿衍生物-酶底物法大肠菌群检测试剂-北京和信同通科技发展有限公司 | 有机肥设备生产制造厂家,BB掺混肥搅拌机、复合肥设备生产线,有机肥料全部加工设备多少钱,对辊挤压造粒机,有机肥造粒设备 -- 郑州程翔重工机械有限公司 | 企典软件一站式企业管理平台,可私有、本地化部署!在线CRM客户关系管理系统|移动办公OA管理系统|HR人事管理系统|人力 | 机床主轴维修|刀塔维修|C轴维修-常州翔高精密机械有限公司 | 湖南自考_湖南自学考试网| 二维运动混料机,加热型混料机,干粉混料机-南京腾阳干燥设备厂 | 安平县鑫川金属丝网制品有限公司,声屏障,高速声屏障,百叶孔声屏障,大弧形声屏障,凹凸穿孔声屏障,铁路声屏障,顶部弧形声屏障,玻璃钢吸音板 | PU树脂_水性聚氨酯树脂_聚氨酯固化剂_聚氨酯树脂厂家_宝景化工 | 翻斗式矿车|固定式矿车|曲轨侧卸式矿车|梭式矿车|矿车配件-山东卓力矿车生产厂家 | 手持式浮游菌采样器-全排二级生物安全柜-浙江孚夏医疗科技有限公司 | 云南成人高考网| C形臂_动态平板DR_动态平板胃肠机生产厂家制造商-普爱医疗 | 宝鸡市人民医院| 首页 - 张店继勇软件开发工作室 兰州UPS电源,兰州山特UPS-兰州万胜商贸 | 锂辉石检测仪器,水泥成分快速分析仪-湘潭宇科分析仪器有限公司 |