点击按钮切换图片

点击按钮时将当前显示的图片切换为指定要显示的图片

效果图演示

未点击更换图片之前显示的图片
在这里插入图片描述
点击更换图片之后
在这里插入图片描述
程序详解

  1. 准备两张互相切换的图片
  2. 给更换图片按钮添加点击事件
  3. 把两张图片放在一个数组里
  4. 点击按钮后执行判断如果是第一张图片就换成第二张,如果是第二张图片就换成第一张

代码演示

注意:
我的两个图片命名为0.jpg和1.jpg

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>img{width: 150px;height: 130px;}</style></head><body><img src="0.jpg" id="imgShow"><input type="button" value="更换图片" onclick="changeImg()" /></body><script>var i = 0;var imgs=["1.jpg","0.jpg"];function changeImg(){document.getElementById("imgShow").src=imgs[i];if(i=0){i=1}else{i=0}}</script>
</html>

了解过程之后也快去试试吧!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/565925.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【OpenCV 例程200篇】54. OpenCV 实现图像二维卷积

【OpenCV 例程200篇】54. OpenCV 实现图像二维卷积 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 滤波通常是指对图像中特定频率的分量进行过滤或抑制。图像滤波是在尽可能保留图像细节特征的…

【OpenCV 例程200篇】55. 可分离卷积核

【OpenCV 例程200篇】55. 可分离卷积核 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 空间滤波器是由邻域和定义的操作构成的&#xff0c;滤波器规定了滤波时采用的邻域形状及该区域内像素值的…

Anaconda 安装 Python 库(MySQLdb)的方法

转载自&#xff1a;苏皖静儿 [已解决]Anaconda 安装 Python 库&#xff08;MySQLdb&#xff09;的方法 zoerywzhou163.com http://www.cnblogs.com/swje/ 作者&#xff1a;Zhouwan 2017-12-4 安装python库的过程中&#xff0c;最重要的地方就是版本需要兼容。其中操作系统为…

获取数据库内容放入下拉框中

获取数据库里的数据放入下拉框中&#xff0c;使下拉框显示的内容是数据库里的内容 功能分析&#xff1a; 设计并实现数据库插入相关数据在登陆页面点击注册按钮时跳到Servlet中在Servlet中连接数据库查询内容放入session中传给jsp页面在jsp页面接受session内容并使用for循环输…

【OpenCV 例程200篇】56. 低通盒式滤波器

【OpenCV 例程200篇】56. 低通盒式滤波器 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件下对目标图像的噪声进行抑制&#xff0c;是常用的图像预处理…

数据只读且无法修改

对输入框的数据进行只读不可修改的设置。 功能分析&#xff1a; 无论你是删除增加点击选中等所有操作对输入框的数据无影响&#xff0c;输入框的数据只会是原始的数据不可修改&#xff0c;一切操作无效。 先看效果图&#xff08;数据不可更改&#xff09; 要实现此效果一共有…

【OpenCV 例程200篇】57. 低通高斯滤波器

【OpenCV 例程200篇】57. 低通高斯滤波器 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件下对目标图像的噪声进行抑制&#xff0c;是常用的图像预处理…

IDEA包的分层显示

使IDEA的项目和包分层显示&#xff0c;结构更加清晰。 未设置分层显示之前的包结构 设置了分层显示之后的包结构 那么如何设置呢&#xff0c;让我们一起来看看吧&#xff01; 设置包结构分层方法 第一步&#xff08;点击像设置一样的图标出先如下菜单&#xff09; 第二部 …

【OpenCV 例程200篇】58. 非线性滤波—中值滤波

【OpenCV 例程200篇】58. 非线性滤波—中值滤波 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件下对目标图像的噪声进行抑制&#xff0c;是常用的图像…

【OpenCV 例程200篇】59. 非线性滤波—双边滤波

【OpenCV 例程200篇】59. 非线性滤波—双边滤波&#xff08;Bilateral filter&#xff09; 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件下对目标图…

部门信息管理系统

实现对部门信息的分类管理&#xff0c;对不同部门人员的管理&#xff08;增删改查&#xff09;&#xff0c;新用户的注册和登陆等 功能分析&#xff1a; 实现用户的登陆实现用户的注册&#xff08;注册不同的部门和职位&#xff09;登陆之后会显示所有员工和经理的信息实现对…

【OpenCV 例程200篇】60. 非线性滤波—联合双边滤波

【OpenCV 例程200篇】60. 非线性滤波—联合双边滤波&#xff08;Joint bilateral filter&#xff09; 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件…

租车系统

为了资源的节约有效利用&#xff0c;使车辆发挥更大的作用&#xff0c;我在此做了一个租车系统。 功能分析&#xff1a; 1&#xff1a;登录功能 2&#xff1a;后台管理功能 3&#xff1a;车辆管理功能 4&#xff1a;用户管理功能 5&#xff1a;前台用户功能 6&#xff1a;查看…

【OpenCV 例程200篇】61. 导向滤波(Guided filter)

【OpenCV 例程200篇】61. 导向滤波&#xff08;Guided filter&#xff09; 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件下对目标图像的噪声进行抑…

使用MATLAB GUI创建图形用户界面GUI

MATLAB是众多理工科学生及工程师经常使用的一款数学软件&#xff0c;除了可以实现数据处理&#xff0c;矩阵运算、函数绘制等功能外&#xff0c;MATLAB还可以实现图形用户界面的设计。 下面介绍如何让小白也能用GUI创建最基本的用户界面&#xff0c;并帮助大家学会在今后的…

【OpenCV 例程200篇】62. 图像锐化——钝化掩蔽

【OpenCV 例程200篇】62. 图像锐化——钝化掩蔽 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 3. 空间域锐化滤波&#xff08;高通滤波&#xff09; 图像模糊通过平滑&#xff08;加权平均&a…

AJAX基本用法

在工作中和一些大项目制作的时候&#xff0c;许多人都会选择使用前后端分离技术即AJAX进行项目的制作&#xff0c;使用AJAX不仅能提高效率而且更容易修改&#xff0c;使我们制作项目的时候更加的得心应手。 在此给大家讲解一下AJAX的用法&#xff0c;一共有五个核心内容&#…

【OpenCV 例程200篇】63. 图像锐化之 Laplacian 算子

【OpenCV 例程200篇】63. 图像锐化之 Laplacian 算子 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 3. 空间域锐化滤波&#xff08;高通滤波&#xff09; 图像模糊通过平滑&#xff08;加权平…

秒表计时器

使用Jquery制作了一个漂亮的秒表计时器。 效果图 原始样式 点击开始之后 点击停止再点击清零之后 有没有一种心动的感觉呢&#xff0c;下面看代码。 代码演示 首先注意哦&#xff1a;引入相对应的Jquery架包。 代码 <!DOCTYPE html> <html><head>&l…

【OpenCV 例程200篇】64. 图像锐化——Sobel 算子

【OpenCV 例程200篇】64. 图像锐化——Sobel 算子 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 3. 空间域锐化滤波&#xff08;高通滤波&#xff09; 图像模糊通过平滑&#xff08;加权平均…