这个例子分享了js实现开灯效果的具体代码，供大家参考。具体内容如下

带开关的灯

style body { background : black；cursor:指针；} .灯{ width: 100px高度： 100像素；边界半径：50%；背景# ccc} .极{ width: 10px高度： 400 px；背景：棕色；左边距left: 45px} .切换{ width: 80px高度： 40px；背景：绿色；border-radius : 5px；左边距left: 10pxcolor:白色；线高： 40px；文本对齐：中心；} /stylebody id='bg '！-lamp-div class=' lamp ' id=' lamp '/div！-灯线-div class=' pole'/div！-switch-div class=' toggle ' id=' toggle '开灯/div script//web前端三种语言//html//css //javascript===脚本语言、丰富的动画、操作事件等。//需要用脚本标签编写。脚本标签可以放在html//三个常见位置的任何地方，//1。在正文内部，html标记//2下面。身体下面//3。头部样式标签下方//js动作创意：//1。谁先得到它；//var创建并声明变量//切换变量名//文档事件元素，事件流//getElementById以Id名的形式获取元素。var toggle=document . getelementbyid(' toggle ')；var lamp=document . getelementbyid(' lamp ')；Varbg=文档。getelementbyid ('bg')//2。操作使用什么事件？toggle.onclick=function(){ //验证当前操作//console.log代表打印。//console.log(123456789) //3。事件发生时需要做什么//if，else事件判断逻辑//innerHTML===元素内容if(toggle.innerHTML=='开灯'){lamp.style.background='黄色'；BG . style . background=' white '；//开灯后将切换开关改为‘关灯’。toggle.innerHTML='关灯' } else { lamp . style . background=' # CCC '；BG . style . background=' black '；Toggle.innerHTML='开灯' } } }/脚本/主体渲染

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。