黑马程序员 JavaScript DOM 案例

最新推荐文章于 2024-04-26 16:47:03 发布

执霜

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量5k

点赞数 2

分类专栏： web 文章标签： dom javascript

本文链接：https://blog.csdn.net/qq_43156556/article/details/121457726

版权

web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JavaScript DOM 案例

电灯开关（两种实现方式）
轮播图片
自动跳转页面
动态表格实现添加和删除数据

1. 电灯开关

实现效果：点击电灯切换开关状态，也即实现图片转换
在这里插入图片描述
核心逻辑：

获取加载图片的对象<img>
var bulb = document.getElementById("image");
修改<img>标签中的src
bulb.src = "img/pic_bulboff.gif";

方式一：在<img>标签中添加onclick()事件属性

<head>
<!--2. 添加样式-->
    <style>
        .bulb{
            width: 150px;
            height: 200px;
            border: 1px dotted black;
        }
    </style>
</head>
<!--1. 显示灯泡图片的img元素-->
<img id = "image" class="bulb" src="img/pic_bulboff.gif" onclick="light()"/>
<!--3. JavaScript动态响应逻辑-->
<script>
    function light(){
        var bulb = document.getElementById("image");
        if(bulb.src.match("bulbon")){
            bulb.src = "img/pic_bulboff.gif";
        }else{
            bulb.src = "img/pic_bulbon.gif";
        }
    }
</script>

方式二：通过DOM获取元素对象，在javascript中为元素添加onclick()事件

<!--1. 显示灯泡图片-->
<!--2. 添加样式-->
<img id = "image" class="bulb" src="img/pic_bulboff.gif"/>
<!--3. JavaScript动态响应逻辑-->
<script>
    var bulb = document.getElementById("image");
    //若不在img标签里写事件，需要把img标签放到script代码的前面
    //否则经过 document.getElementById 得到的对象为null
    window.alert(bulb);
    var flag = false;
    bulb.onclick = function(){
        if(flag){
            bulb.src = "img/pic_bulboff.gif";
            flag = false;
        }else{
            bulb.src = "img/pic_bulbon.gif";
            flag = true;
        }
    }
</script>

2. 轮番图

实现效果：循环切换图片
在这里插入图片描述
核心逻辑：

修改<img>属性
var img = document.getElementById("image");
img.src = "img/OIP-" + number + ".png";
设置定时器
setInterval(func, 3000);

<!--1. 加载图片-->
<!--2. 切换图片逻辑-->
<img id="image" src="img/OIP-0.png"/>
<script>
    <!--修改图片的属性-->
    var number = 0;
    function func(){
        number++;
        if(number > 2){
            number = 0;
        }
        var img = document.getElementById("image");
        img.src = "img/OIP-" + number + ".png";
    }
//    设置定时器
    setInterval(func, 3000);
</script>

3. 自动跳转

实现效果：页面上设置倒数计时器，0秒时跳转到指定页面
在这里插入图片描述
核心逻辑

页面显示倒数的数字
num.innerHTML = sec + "";
页面跳转
location.href = "https://www.runoob.com/";

<head>
    <meta charset="UTF-8">
    <title>3. 自动跳转</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>
</head>
<!--1. 初始页面-->
<p>
    <span id="number">5</span>秒后跳转页面
</p>
<!--2. 动态展示页面-->
<script>
//    1. 改变页面上的倒计时数字
    var sec = 5;
    var num = document.getElementById("number");
    function changeNum(){
        sec--;
        if(sec <= 0){
            location.href = "https://www.runoob.com/";
        }
        num.innerHTML = sec + "";
    }
    //2. 设置定时器
    setInterval(changeNum,1000);
</script>

4. 动态表格

在这里插入图片描述
添加逻辑：
1. 添加按钮绑定单击事件
btn.onclick = function(){...};
2. 获取文本框的内容
var id = document.getElementById("id").value;
3. 创建td并设置其文本为2.中获取的文本框

var td_id = document.createElement("td");
        // window.alert(typeof(id));//string
var text_id = document.createTextNode(id);
        // window.alert(text_id);//[object Text]
td_id.appendChild(text_id);
td_id.appendChild(id);

使用document.createTextNode(id)的原因是：
若直接使用td_id.appendChild(id)会报错

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

原因是： id是string类型需要转换为[object Text]类型.
4. 创建tr并添加子节点td.

var tr = document.createElement("tr");
tr.appendChild(td_id);

5.获取table并添加子节点tr

var tbl = document.getElementsByTagName("table")[0];
tbl.appendChild(tr);

删除逻辑：

确定操作的是哪行的删除链接，在每行的a标签里添加onclick()事件
<td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
获取父结点table删除子节点tr
table.remove(tr)

整体代码：

<head>
    <meta charset="UTF-8">
    <title>4. 动态表格</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        th,td{
            text-align: center;
            /*border: 1px solid;*/
        }
        div{
            text-align: center;
            margin: 50px;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div>
    <input type="text" id="id" placeholder="请输入编号"/>
    <input type="text" id="name" placeholder="请输入姓名"/>
    <input type="text" id="gender" placeholder="请输入性别"/>
    <input type="button" id="btn_add" value="添加"/>
</div>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>郭靖</td>
        <td>男</td>
        <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>黄蓉</td>
        <td>女</td>
        <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>杨康</td>
        <td>男</td>
        <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
    </tr>
</table>
<script>
    /*
    添加操作:
    1. 给添加按钮绑定单击事件
    2. 获取文本框的内容
    3. 创建td,设置td的文本为文本框的内容
    4. 创建tr将td添加到tr中
    5. 获取table将tr添加到table中
     */
    var btn = document.getElementById("btn_add");
    btn.onclick = function(){
        //2. 获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //3. 创建td,赋值td的标签体
        var td_id = document.createElement("td");
        // window.alert(typeof(id));
        var text_id = document.createTextNode(id);
        // window.alert(text_id);
        td_id.appendChild(text_id);
        td_id.appendChild(id);

        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);

        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);

        var td_a = document.createElement("td");
        var ele_a = document.createElement("a");
        //https://www.runoob.com/js/js-void.html
        //javascript:void(0)什么也不会发生
        ele_a.setAttribute("href","javascript:void(0);");
        ele_a.setAttribute("onclick","delTr(this);");
        var text_a = document.createTextNode("删除");
        ele_a.appendChild(text_a);
        td_a.appendChild(ele_a);

        //4. 创建tr,将td添加到tr中
        var tr = document.createElement("tr");
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.append(td_a);

        //5. 获取table,将td添加到tr中
        var tbl = document.getElementsByTagName("table")[0];
        tbl.appendChild(tr);
    }
    /*
    删除操作:
    1. 确定点击的是那行的删除链接,在每行的a标签里添加点击事件
    <td><a href="javascript:void(0)" οnclick="delTr(this)">删除</a></td>
    2. 如何删除
    table.remove(tr),获取table,获取父结点tr
     */
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</body>

执霜

关注

2
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
黑马程序员 JavaScript DOM 案例

JavaScript DOM 案例电灯开关（两种实现方式）轮播图片自动跳转页面动态表格实现添加和删除数据1. 电灯开关实现效果：点击电灯切换开关状态，也即实现图片转换核心逻辑：获取加载图片的对象<img>var bulb = document.getElementById("image");修改<img>标签中的srcbulb.src = "img/pic_bulboff.gif";方式一：在<img>标签中添加onclick()事件属性
复制链接

扫一扫