<style> body{background: black;cursor: pointer;} .lamp{width: 100px;height: 100px;border-radius: 50%;background: #ccc;} .pole{width: 10px;height: 400px;background: brown;margin-left: 45px;} .toggle{width: 80px;height: 40px;background: green;border-radius: 5px;margin-left: 10px;color: white;line-height: 40px;text-align: center;} </style>
<body> <!-- 灯 --> <div></div> <!-- 灯线 --> <div></div> <!-- 开关 --> <div>开灯</div> <script> // web前端三门语言 // html // css // javascript===>脚本语言，丰富动画，操作事件等 // 需要写在script标签内，script标签可以放置在html的任意位置 // 比较常见的三个位置， // 1.body体内，html标签下面 // 2.body体外的下面 // 3.head头部style标签的下面 // js动效的操作思路： // 1.操作谁先获取谁； // var 创建、声明变量 // toggle 变量名 // document事件元素，事件流 // getElementById 获取元素通过ID名的形式。 var toggle = document.getElementById('toggle'); var lamp = document.getElementById('lamp'); var bg = document.getElementById('bg') // 2.操作用什么事件 toggle.onclick = function(){ //验证当前操作 // console.log代表打印某某某。 // console.log(123456789) // 3.事件发生时需要做什么 // if,else事件判断逻辑 // innerHTML===>元素的内容 if(toggle.innerHTML=='开灯'){ lamp.style.background='yellow'; bg.style.background='white'; //开灯之后要将toggle改变为'关灯' toggle.innerHTML='关灯' }else{ lamp.style.background='#ccc'; bg.style.background='black'; toggle.innerHTML='开灯' } } </script> </body>
效果图
