JavaScript 解决切换图片问题

 代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 600px;height: 500px;border: 1px solid #333;text-align: center;margin: auto;}.box1 img {width: 200px;margin-top: 100px;padding: 0px 30px;}</style>
</head><body><div class="box1"><img src="../img/img1.jpg" alt="" id="box1img1"><button id="box1btn">交换</button><img src="../img/img2.jpg" alt="" id='box1img2'></div><script>var img1 = document.querySelector('#box1img1');var img2 = document.querySelector('#box1img2');var btn = document.querySelector('#box1btn');console.log(img1, img2, btn);var flag = 1;btn.onclick = function () {if (flag) {img1.src = '../img/img2.jpg';img2.src = '../img/img1.jpg';flag = 0;} else {img1.src = '../img/img1.jpg';img2.src = '../img/img2.jpg';flag = 1;}}</script>
</body></html>

效果图:

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

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

相关文章

华为配置攻击检测功能示例

配置攻击检测功能示例 组网图形 图1 配置攻击检测功能示例组网图 业务需求组网需求数据规划配置思路配置注意事项操作步骤配置文件 业务需求 企业用户通过WLAN接入网络&#xff0c;以满足移动办公的最基本需求。且在覆盖区域内移动发生漫游时&#xff0c;不影响用户的业务使用。…

openssl_encrypt 加密解密

DES 是对称性加密里面常见一种&#xff0c;全称为 Data Encryption Standard&#xff0c;即数据加密标准&#xff0c;是一种使用密钥加密的块算法。密钥长度是64位(bit)&#xff0c;超过位数密钥被忽略。所谓对称性加密即加密和解密密钥相同&#xff0c;对称性加密一般会按照固…

Python文件操作系统操作指南

在Python编程中&#xff0c;文件系统的管理是至关重要的技能之一&#xff0c;无论是读取文本文件、处理CSV数据、编写日志&#xff0c;还是进行文件和目录的创建、移动、复制、删除等操作。本指南将全面介绍如何利用Python标准库中的os和shutil模块来有效地管理和操作文件系统。…

车灯典型方案 H5528L 降压恒流芯片12V240V360V48V60V72V90V转9V12V 高低亮 性价比高

降压恒流芯片支持高低亮工作原理&#xff1a; 通过PWM&#xff08;脉冲宽度调制&#xff09;技术来调节开关管的开关时间&#xff0c;从而实现稳定的输出电压和电流&#xff0c;保持LED灯的亮度稳定。当需要调节LED灯的亮度时&#xff0c;可以通过改变PWM信号的占空比来实现。…

【信号分析】01/说在前面

全课程思维 #mermaid-svg-va4HsweZFSOJpLXa {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-va4HsweZFSOJpLXa .error-icon{fill:#552222;}#mermaid-svg-va4HsweZFSOJpLXa .error-text{fill:#552222;stroke:#552222;…

软件设计模式之访问者模式(Visitor Pattern)

访问者模式是一种行为型设计模式&#xff0c;它允许你定义一系列操作&#xff0c;这些操作可以应用于对象结构中的元素&#xff0c;而不改变这些元素的类。通过这种方式&#xff0c;可以在不改变各个元素的类的情况下&#xff0c;增加新的操作。 1. 何时使用访问者模式&#x…

在手机浏览器中打开指定的应用商店

前言 大牛&#xff1a;你们这应用下载太慢了&#xff0c;为何不跳转到手机自带的应用商店下载&#xff0c;还不占用你们服务器的资源&#xff01; 程序猿&#xff1a;哇&#xff01;&#xff01;&#xff01;是的啊&#xff01; 一、如何区分现在运行在哪一个厂商的手机里面&…

Bert-as-service 实战

参考&#xff1a;bert-as-service 详细使用指南写给初学者-CSDN博客 GitHub - ymcui/Chinese-BERT-wwm: Pre-Training with Whole Word Masking for Chinese BERT&#xff08;中文BERT-wwm系列模型&#xff09; 下载&#xff1a;https://storage.googleapis.com/bert_models/…

hive执行select count(1)返回0

背景&#xff1a; 做数据质量检核任务的时候&#xff0c;有些数据表有数据&#xff0c;直接查hive执行select count(1) from table返回的值一直是0 问题原因&#xff1a; hive通过select count(1)或者select count(*) 查询的是元数据库里面的rownum,如果数据表数据是通过load、…

使用Django的admin功能管理数据_vscode

之前的文章 项目 hello_django, app名 hello&#xff0c;已有的model LogMessage&#xff1a; https://blog.csdn.net/weixin_44741835/article/details/136202771?spm1001.2014.3001.5502 参考得到电子书&#xff1a;第八章。 https://www.dedao.cn/ebook/reader?idrEQKv6…

linux系统-----------搭建LNMP 架构

PHP(Hypertext Preprocessor 超文本预处理器)是通用服务器端脚本编程语言&#xff0c;主要用于web开发实现动态web页面&#xff0c;也是最早实现将脚本嵌入HTML源码文档中的服务器端脚本语言之一。同时&#xff0c;php还提供了一个命令行接口&#xff0c;因此&#xff0c;其也可…

能在手机上运行,仅仅0.5B大小的小语言模型MobiLlama

模型介绍 该模型基于LLaMA-7B架构设计&#xff0c;旨在能够在边缘设备上高效运行&#xff0c;无需将数据发送到远程服务器或云端处理。如智能手机、平板电脑、智能手表等。MobiLlama模型虽然体积小、对资源的需求低&#xff0c;但仍能提供高精度的语言理解和生成能力。项目还提…

java 通过 microsoft graph 调用outlook

废话不多说 一 官方文档 先看一下官方文档&#xff0c;https://learn.microsoft.com/zh-cn/graph/tutorials/java?contextoutlook%2Fcontext&tabsaad&tutorial-step1 其中的代码&#xff0c;可以通过地址下载&#xff1a;https://developer.microsoft.com/en-us/gra…

NutUI + taro +vue 开发遇到的问题 使用popup组件 内部元素滚动遇到的的问题

1 popup 弹出内容时 弹出的框内元素数据很长需要滚动时 本地可以正常滚动 打包成小程序后无法滚动 如这样的免责条款内容 代码如下 解决办法 1 把2处的单位换成百分比 弹框能滚动但是 是popup 里面所有的元素都一起滚动 导致标题都滚走了 2 scroll-y 改成&#xff1a; :scrol…

单片机05__串口USART通信__按键控制向上位机传输字符串

串口USART通信 通用UART介绍 1.通信的概念 计算机与外界进行信息交换的过程称之为通信。 在通信的过程中&#xff0c;通信双方都需要遵守的规则称之为通信协议。 硬件协议&#xff1a;将数据以什么样的方式传输过去 软件协议&#xff1a;将数据以什么样的顺序传输过去 2.常用…

Android 通知--判断通知是否有跳转

一. 从应用层来分析 在 Android 中&#xff0c;可以通过 PendingIntent 来实现有跳转的通知和没有跳转的通知的区别。具体来说&#xff0c;有跳转的通知会设置一个 PendingIntent&#xff0c;当用户点击通知时会触发该 PendingIntent&#xff0c;打开指定的界面或执行特…

C++ 高级面试题:解释 C++ 中的抽象基类和纯虚函数

解释 C 中的抽象基类和纯虚函数 在C中&#xff0c;抽象基类和纯虚函数是面向对象编程中的重要概念&#xff0c;用于实现多态性和接口规范。它们通常与继承和多态结合使用&#xff0c;以实现接口的统一定义和派生类的不同实现。 抽象基类&#xff08;Abstract Base Class&…

SpringBoot-集成Elasticsearch

依赖 <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.62</version> </dependency> <dependency><groupId>org.springframework.boot</groupId><artifactId…

微服务之qiankun主项目+子项目搭建

主项目使用history&#xff0c;子项目使用hash模式 1. 下载安装"qiankun": "^2.10.13"2. 手动调用qiankun,使用vue脚手架搭建的项目1. 主项目配置&#xff08;我使用的是手动调用乾坤&#xff0c;在指定页面显示内容&#xff09;1. 要使用的页面中引入乾坤…

MyBatis概述

三层架构 表现层&#xff1a;直接和前端交互&#xff0c;接受AJAX请求&#xff0c;返回json数据业务层&#xff1a;一是处理前端的请求&#xff0c;二是返回持久层获取的数据持久层(数据访问层)&#xff1a;直接操作数据库&#xff0c;完成CRUD&#xff0c;返回数据给业务层 …