05电灯开关的案例

最新推荐文章于 2024-09-09 22:16:15 发布

输出机器

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量278

点赞数

分类专栏： JavaScript 文章标签： html 开发语言前端 javascript

本文链接：https://blog.csdn.net/qq_44974028/article/details/123665223

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

DOM简单学习：

功能：控制html文档的内容

获取页面标签(元素)对象：Element

document.getElementById("id值"):通过元素的id获取元素对象

操作Element对象：

1. 修改属性值：

1. 明确获取的对象是哪一个，如<img> <a> <p> <button> 这些都是对象

2. 查看API文档，找其中有哪些属性可以设置

2. 修改标签体内容：

属性：innerHTML

1. 获取元素对象

2. 使用innerHTML属性修改标签体内容

事件简单学习

功能：某些组件被执行了某些操作后，触发某些代码的执行。

如何绑定事件

1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码

事件：onclick单击事件，ondblclick双击事件

2. 通过js获取元素对象，指定事件属性，设置一个函数

var light3 = document.getElementById("light3");

light3.onclick = fun3;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>09电灯开关小案例</title>
    </head>
    <body>
        <!-- 更改标签属性和更改标签体内容练习 -->
        <img id = "light1" src = "imag/off.gif">
        <p id = "adc">点击我，用innerHTML属性更换我的标签体的内容</p>

        <!-- 第一种方式绑定事件
                    在标签体中添加onclick单击事件
                    在标签体中添加ondblclick双击事件
                -->
        <img id = "light2" src = "imag/off.gif" onclick="fun1()" ondblclick="fun2()"><br>
        <p>请点击上面的图片,点击开灯，双击关灯</p>

        <!-- 第二种方式绑定事件
                    不在HTML标签中写事件，用js获取到标签对象
                    然后设置获取到对象的事件 
                -->
        <img id = "light3" src = "imag/off.gif">
        <p>请点击上面的图片,点击开灯，再点击关灯</p>

        <script>
            // //获取标签的属性值
            // var light = document.getElementById("light1");
            // alert("变换图片");
            // //通过更改标签的属性值来更换标签
            // light.src = "imag/on.gif"

            // //获取标签的属性值
            // var adc = document.getElementById("adc");
            // alert("确定更改标签体的内容吗？");
            // //使用innerHTML修改标签体内容
            // adc.innerHTML = "我是已经被改变的标签内容"

            //事件的绑定

            //第一种绑定方式
            //直接在HTML标签中添加属性，onclick
            //点击事件函数
            function fun1(){
                var light = document.getElementById("light2");
                light.src = "imag/on.gif"
            }
            //双击事件函数
            function fun2(){
                var light = document.getElementById("light2");
                light.src = "imag/off.gif"
            }

            //事件的绑定
            //第二种绑定方式
            //通过js获取元素对象，指定事件属性，设置函数
            var light3 = document.getElementById("light3");
            //设置标记
            var flag = false;
            //绑定事件
            light3.onclick = fun3;//注意函数调用方式。没有括号！！！
            //事件实现函数
            
            function fun3(){
                if(flag){
                    light3.src = "imag/on.gif";
                    flag = false;
                }else{
                    light3.src = "imag/off.gif";
                    flag = true;
                }
            }

            /* 
            上面的函数还可以直接匿名创建
            light3.onclick = function(){
                if(flag){
                    light3.src = "imag/on.gif";
                    flag = false;
                }else{
                    light3.src = "imag/off.gif";
                    flag = true;
                }
            }
            */
        </script>

    </body>
</html>

运行结果：

输出机器

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
05电灯开关的案例

DOM简单学习：功能：控制html文档的内容获取页面标签(元素)对象：Element document.getElementById("id值"):通过元素的id获取元素对象操作Element对象： 1. 修改属性值： 1. 明确获取的对...
复制链接

扫一扫