10.30

对 DOM的简单练习

电灯开关
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>电灯开关</title>
        
        </head>
        <body>
        
        <img id="light" src="img/off.gif">
        
        <script>
            /*
                分析：
                    1.获取图片对象
                    2.绑定单击事件
                    3.每次点击切换图片
                        * 规则：
                            * 如果灯是开的 on,切换图片为 off
                            * 如果灯是关的 off,切换图片为 on
                        * 使用标记flag来完成
        
             */
        
            //1.获取图片对象
            var light = document.getElementById("light");
        
            var flag = false;//代表灯是灭的。 off图片
        
            //2.绑定单击事件
            light.onclick = function(){
                if(flag){//判断如果灯是开的，则灭掉
                    light.src = "img/off.gif";
                    flag = false;
        
                }else{
                    //如果灯是灭的，则打开
        
                    light.src = "img/on.gif";
                    flag = true;
                }
        
        
            }
            
        </script>
        </body>
        </html>

 

posted @ 2020-10-30 20:03  {hunter}ZY  阅读(78)  评论(0)  编辑  收藏  举报