前端 【基于HTML5的网页设计及应用】——-图片的替换和复制

个人专栏：

 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客

Java基础：Java基础_IT闫的博客-CSDN博客

c语言：c语言_IT闫的博客-CSDN博客

MySQL：数据结构_IT闫的博客-CSDN博客

数据结构：​​​​​​数据结构_IT闫的博客-CSDN博客

C++：C++_IT闫的博客-CSDN博客

諒C51单片机：C51单片机（STC89C516）_IT闫的博客-CSDN博客

基于HTML5的网页设计及应用：基于HTML5的网页设计及应用_IT闫的博客-CSDN博客​​​​​​

累python：python_IT闫的博客-CSDN博客

离散数学：离散数学_IT闫的博客-CSDN博客

​​​​​​諒Linux：​​​​Linux_Y小夜的博客-CSDN博客

Rust：Rust_Y小夜的博客-CSDN博客

欢迎收看，希望对大家有用！

目录

功能简介

代码解析

核心代码

效果展示

功能简介

该HTML代码实现了两个功能：

1. 点击“复制图片”按钮，会在页面末尾添加一张与第一幅图片相同的新图片。

2. 点击“更改图片”按钮，会将所有图片元素的`src`属性更改为第二幅图片的地址，从而实现将所有图片更改为第二幅图片的功能。

其中，CSS代码设置了所有图片的宽度和高度，便于在页面中显示。JavaScript代码通过获取页面中的图片和按钮元素，以及定义两个函数来实现复制图片和更改图片的功能。

代码解析

当点击复制图片按钮时，调用copyImg()函数。函数的功能是创建一个新的元素，并将其src属性设置为页面中第一张图片的地址，然后将这个新的图片元素添加到中。这样就实现了复制图片的功能。

代码片段:

// 复制图片函数

function copyImg() {

// 创建新的图片元素并设置src属性为第一幅图片的地址，并将其添加到body中

var newImg = document.createElement("img");

newImg.src = imgs[0].src;

document.body.appendChild(newImg);

}

当点击更改图片按钮时，调用changeImg()函数。函数的功能是将所有图片元素的src属性更改为第二幅图片的地址，从而实现将所有图片更改为第二幅图片的功能。

代码片段:

// 更改图片函数

function changeImg() {

// 将所有图片元素的src属性更改为第二幅图片的地址

for (var i = 0; i < imgs.length; i++) {

imgs[i].src = "images/tp2.jpg";

}

}

需要注意的是，这里假设页面中存在多张图片，并且都是元素标签。imgs变量通过getElementsByTagName("img")获取到页面中所有的元素，然后通过索引来访问特定的图片元素。copyImgBtn和changeImgBtn变量分别获取到了两个按钮元素。

核心代码

效果展示

文章来源