欢迎光临散文网 会员登陆 & 注册

js中DOM的代码

2020-05-01 12:57 作者:小垃圾kiki  | 我要投稿
<!DOCTYPE html>
<html>
<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>

js中DOM的代码的评论 (共 条)

分享到微博请遵守国家法律