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

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

2024-05-10 08:05:39 前端知识 前端哥 520 524 我要收藏

🎃个人专栏:

🐬 算法设计与分析:算法设计与分析_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博客

欢迎收看,希望对大家有用!

学习推荐:

        在当今这个飞速发展的信息时代,人工智能(AI)已经成为了一个不可或缺的技术力量,它正在逐步改变着我们的生活、工作乃至整个社会的运作方式。从智能语音助手到自动驾驶汽车,从精准医疗到智慧城市,人工智能的应用已经渗透到了我们生活的方方面面。因此,学习和掌握人工智能相关的知识和技能,对于任何希望在这个时代保持竞争力的个人来说,都已经变得至关重要。

        然而,人工智能是一个涉及数学、计算机科学、数据科学、机器学习、神经网络等多个领域的交叉学科,其学习曲线相对陡峭,对初学者来说可能会有一定的挑战性。幸运的是,随着互联网教育资源的丰富,现在有大量优秀的在线平台和网站提供了丰富的人工智能学习材料,包括视频教程、互动课程、实战项目等,这些资源无疑为学习者打开了一扇通往人工智能世界的大门。

        前些天发现了一个巨牛的人工智能学习网站:前言 – 人工智能教程通俗易懂,风趣幽默,忍不住分享一下给大家。

目录

🎯功能简介

🎯代码解析

🎯核心代码

🎯效果展示


🎯功能简介

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

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

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

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

🎯代码解析

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

代码片段:

// 复制图片函数
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";
    }
}

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

🎯核心代码

<input type="button" value="复制图片" onclick="copyImg()" />&nbsp;&nbsp;
	<input type="button" value="更改图片" onclick="changeImg()" /><br />
	<img src="images/tp1.jpg" />

🎯效果展示

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7802.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!