当前位置: 首页 > news >正文

html--学习

javascrapt交互,网页控制

JavaScript:改变 HTML 图像

本例会动态地改变 HTML <image> 的来源(src):

点亮灯泡

<script>function changeImage()
{element=document.getElementById('myimage')
#内存变量,取得src="/images/pic_bulboff.gif"if (element.src.match("bulbon")){element.src="/images/pic_bulboff.gif";}else{element.src="/images/pic_bulbon.gif";}
}
</script><img decoding="async" loading="lazy" id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

这段代码是一个JavaScript函数,它会在点击图片时切换图片的显示。具体来说,代码中定义了一个名为 changeImage 的函数,其中的操作如下:

  • 获取名为 myimage 的图片元素

  • 检查图片的 src 属性是否包含 "bulbon" 子字符串

  • 如果包含,将 src 属性设置为 "/images/pic_bulboff.gif",这是灯泡关闭时的图片

  • 如果不包含,将 src 属性设置为 "/images/pic_bulbon.gif",这是灯泡开启时的图片

在HTML中,使用 onclick 属性将该函数与图片元素关联,因此当用户点击图片时,函数会被调用并执行上述操作。

注意,这段代码中的图片路径是相对于网站根目录的。如果网站根目录中没有 images 文件夹,图片将无法正确加载。

HTTP协议

相关文章:

html--学习

javascrapt交互&#xff0c;网页控制JavaScript&#xff1a;改变 HTML 图像本例会动态地改变 HTML <image> 的来源&#xff08;src&#xff09;&#xff1a;点亮灯泡<script>function changeImage() {elementdocument.getElementById(myimage) #内存变量&#xff0…...

关于递归处理,应该怎么处理,思路是什么?

其实问题很简单&#xff0c;就是想要循环遍历整个data对象&#xff0c;来实现所有name转成label&#xff0c;但是想到里面还有children属性&#xff0c;整个children里面可能还会嵌套很多很多的name&#xff0c;如此循环&#xff0c;很难搞&#xff0c;知道使用递归&#xff0c…...

重磅!牛客笔试客户端可防ChatGPT作弊

上线俩月&#xff0c;月活过亿。爆火的ChatGPT能代写文&#xff0c;撕代码&#xff0c;善玩梗&#xff0c;秒答题&#xff0c;几乎“无所不能”&#xff0c;争议也随之而来。调查显示&#xff0c;截至2023年1月&#xff0c;美国89%的大学生利用ChatGPT应付作业&#xff0c;53%的…...

春季训练营 | 前端+验证直通车-全实操项目实践,履历加成就业无忧

“芯动的offer”是2023年E课网联合企业全新推出集训培优班&#xff08;线下&#xff09;&#xff0c;针对有一定基础&#xff08;linux、verilog、uvm等&#xff09;在校学生以及想要通过短时间的学习进入到IC行业中的转行人士&#xff0c;由资深IC设计工程师带教&#xff0c;通…...

2.详解URL

文章目录视图函数1.1endpoint简介1.2 装饰器注册路由源码浅析1.3 另一种注册路由的方式---app.add_url_rule()1.4 视图函数中添加自定义装饰器2 视图类2.1 视图类的基本写法3 详细讲解注册路由的参数3.1常用的参数3.2不常用的参数(了解)视图函数 1.1endpoint简介 endpint参数…...

Android特别的数据结构(二)ArrayMap源码解析

1. 数据结构 public final class ArrayMap<K,V> implements Map<K,V> 由两个数组组成&#xff0c;一个int[] mHashes用来存放Key的hash值&#xff0c;一个Object[] mArrays用来连续存放成对的Key和ValuemHashes数组按非严格升序排列初始默认容量为0减容&#xff…...

减少if else

1. 三目运算符 可以理解为条件 ?结果1 : 结果2 里面的?号是格式要求。也可以理解为条件是否成立&#xff0c;条件成立为结果1&#xff0c;否则为结果2。 实例&#xff1a; public String handle(int code) {if (code 1) {return "success";} else {return &quo…...

硕士毕业论文常见的排版小技巧

word排版陆续更新吧&#xff0c;更具我所遇到的一些小问题&#xff0c;总结上来 文章目录1.避免题注&#xff08;图或者表的标题&#xff09;与图或表格分不用页注意点&#xff1a;光标移动到表的题注后面2.设置论文的页眉关键点&#xff1a;需要将每一章节末尾&#xff0c;都要…...

JAVA开发(数据类型String和HasMap的实现原理)

在JAVA开发中&#xff0c;使用最多的数据类型恐怕是String 和 HasMap两种数据类型。在开发的过程中我们每天都使用的不亦乐乎。但是相信很多人都没有考虑过String数据类型的实现原理或者说是在数据结构中的存储原理&#xff0c;还有一个就是是HashMap&#xff0c;也很少有人去了…...

Hbase 映射到Hive

目录 一、环境配置修改 关闭掉hbase&#xff0c;zookeeper和hive服务 进入hive312/conf 修改hive-site.xml配置&#xff0c; 在代码最后添加配置 将hbase235的jar包全部拷贝到hive312的lib目录&#xff0c;并且所有的是否覆盖信息全部输入n&#xff0c;不覆盖 查看hive312下…...

14_MySQL视图

1. 常见的数据库对象2. 视图概述2.1 使用视图的好处视图一方面可以帮我们使用表的一部分而不是所有的表&#xff0c;另一方面也可以针对不同的用户制定不同的查询视图。比如&#xff0c;针对一个公司的销售人员&#xff0c;我们只想给他看部分数据&#xff0c;而某些特殊的数据…...

做程序界中的死神,斩魂刀始解

标题解读&#xff1a;标题中的死神&#xff0c;是源自《死神》动漫里面的角色&#xff0c;斩魂刀是死神的武器&#xff0c;始解是斩魂刀的初始解放形态&#xff0c;卐解是斩魂刀的觉醒解放形态&#xff0c;也是死神的大招。意旨做程序界中程序员的佼佼者&#xff0c;一步一步最…...

顺序表——“数据结构与算法”

各位CSDN的uu们你们好呀&#xff0c;今天小雅兰的内容是数据结构与算法里面的顺序表啦&#xff0c;在我看来&#xff0c;数据结构总体上是一个抽象的东西&#xff0c;关键还是要多写代码&#xff0c;下面&#xff0c;就让我们进入顺序表的世界吧 线性表 顺序表 线性表 线性表&…...

嵌入式Linux从入门到精通之第十六节:U-boot分析

简介 u-boot最初是由PPCBoot发展而来的,可以引导多种操作系统、支持多种架构的CPU,它对PowerPC系列处理器的支持最为完善,而操作系统则对Linux系统的支持最好目前已成为Armboot和PPCboot的替代品。 特点: 主要支持操作系统:Linux、NetBSD、 VxWorks、QNX、RTEMS、ARTOS、L…...

UART 串口通信

第18.1讲 UART串口通信原理讲解_哔哩哔哩_bilibili 并行通信 一个周期同时发送8bit的数据&#xff0c;占用引脚资源多 串行通信 串行通信的通信方式&#xff1a; 同步通信 同一时钟下进行数据传输 异步通信 发送设备和接收设备的时钟不同 但是需要约束波特率&#xff08;…...

【硬件】P沟道和N沟道MOS管开关电路设计

场效应管做的开关电路一般分为两种&#xff0c;一种是N沟道&#xff0c;另一种是P沟道&#xff0c;如果电路设计中要应用到高端驱动的话&#xff0c;可以采用PMOS来导通。P沟道MOS管开关电路PMOS的特性&#xff0c;Vgs小于一定的值就会导通&#xff0c;当Vgs<0,即Vs>Vg,管…...

中移杭研一面经历

文章目录 1、常用的Java元注解@Documented@Target@Retention@Override@Deprecated@Inherited@Repeatable@Native2、Java注解的原理3、spring boot starter开发过程1、原理浅谈2、大概步骤3、项目介绍1、常用的Java元注解 @Documented @Documented 是一个标记注解,没有成员变…...

如何成为一名全栈工程师:专业建议与技能要求

作为一名全栈工程师&#xff0c;你需要拥有跨越前端、后端、数据库等多个领域的技能&#xff0c;并能够将它们整合起来构建出完整的应用程序。因此&#xff0c;成为一名全栈工程师需要你掌握多种技术&#xff0c;具备较强的编程能力和系统设计能力。下面&#xff0c;我将从以下…...

MySQL架构篇

一、进阶学习环境说明 1.1 MySQL服务器环境 Linux虚拟机&#xff1a;CentOS 7 MySQL&#xff1a;MySQL5.7.30 在Linux服务器中安装MySQL&#xff1a; ps.如果有自己的云服务器&#xff0c;可忽略前两步&#xff0c;直接进行第三步 1.2 服务器日志文件说明 MySQL是通过文件系统对…...

Redhat7.6安装weblogic10.3.6(超详细,有图文)

一、环境 linux版本&#xff1a;Redhat 7.6 weblogic版本:WLS10.3.6 jdk版本&#xff1a;jdk1.8.0 下载网址&#xff1a;https://www.oracle.com/technetwork/middleware/weblogic/downloads/index.html 1.安装vsftpd服务&#xff0c;将部署环境使用JDK文件和wls服务文件…...

OpenClaw快速安装部署:让AI住进你的电脑

一、前言 上篇说完OpenClaw是什么&#xff0c;有小伙伴留言说&#xff1a;“听起来挺猛&#xff0c;但安装肯定很复杂吧&#xff1f;”确实&#xff0c;之前我也有这个顾虑。毕竟涉及到Gateway、Agent、多渠道配置&#xff0c;听起来就头大。 但实际搞下来——就两条命令。 今天…...

终极指南:如何在Windows电脑上直接安装Android应用

终极指南&#xff1a;如何在Windows电脑上直接安装Android应用 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer APK Installer是一款专为Windows系统设计的Android应用安…...

图像处理小技巧:如何用Photoshop和Python模拟近红外摄影效果

图像处理小技巧&#xff1a;如何用Photoshop和Python模拟近红外摄影效果 近红外摄影以其独特的视觉效果在艺术创作和科学分析领域广受欢迎。传统的近红外摄影需要特殊滤镜和改装相机&#xff0c;但通过数字图像处理技术&#xff0c;我们完全可以在不改变硬件设备的情况下&#…...

OctoLinker:突破跨平台代码导航壁垒,实现无缝开发体验

OctoLinker&#xff1a;突破跨平台代码导航壁垒&#xff0c;实现无缝开发体验 【免费下载链接】OctoLinker OctoLinker — Links together, what belongs together 项目地址: https://gitcode.com/gh_mirrors/oc/OctoLinker 跨平台开发中&#xff0c;开发者常常面临不同…...

用Arduino UNO R3和面包板,从零组装你的第一台meArm机械臂(附电源模块避坑指南)

用Arduino UNO R3和面包板&#xff0c;从零组装你的第一台meArm机械臂&#xff08;附电源模块避坑指南&#xff09; 当你第一次看到meArm机械臂灵活抓取物体的视频时&#xff0c;是否也想过自己动手组装一台&#xff1f;作为开源硬件领域的经典项目&#xff0c;meArm以其精巧的…...

实战指南:基于Cursor与快马平台,从零搭建一个可用的商品管理后台

今天想和大家分享一个实战项目——用Cursor和InsCode(快马)平台从零搭建商品管理后台的全过程。这个项目麻雀虽小五脏俱全&#xff0c;包含了前后端完整链路&#xff0c;特别适合想练手全栈开发的朋友。 项目架构设计 整个系统采用前后端分离模式。后端用Spring Boot搭建RESTfu…...

ESP32远程识别模块完整指南:如何实现无人机合规飞行

ESP32远程识别模块完整指南&#xff1a;如何实现无人机合规飞行 【免费下载链接】ArduRemoteID RemoteID support using OpenDroneID 项目地址: https://gitcode.com/gh_mirrors/ar/ArduRemoteID 随着全球无人机法规日益严格&#xff0c;FAA和欧盟都要求无人机必须配备专…...

LiuJuan20260223Zimage参数详解:LoRA rank/alpha设置对人像细节影响深度分析

LiuJuan20260223Zimage参数详解&#xff1a;LoRA rank/alpha设置对人像细节影响深度分析 1. 引言&#xff1a;从一张好看到一张传神 你肯定见过很多AI生成的人像&#xff0c;有的乍一看还行&#xff0c;但总觉得哪里不对劲——可能是眼神呆滞&#xff0c;可能是发丝模糊&…...

计算机毕业设计springboot校园外卖系统 基于Spring Boot的高校餐饮配送服务平台 Spring Boot框架下的校园在线订餐与配送管理系统

计算机毕业设计springboot校园外卖系统n322b9 &#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。随着互联网技术的日益成熟和普及&#xff0c;网络已经深度融入人们的日常生活&…...

PROFINET通信避坑指南:PN/PN耦合器在S7系列PLC中的3种典型应用场景解析

PROFINET通信避坑指南&#xff1a;PN/PN耦合器在S7系列PLC中的3种典型应用场景解析 在工业自动化领域&#xff0c;PROFINET通信的稳定性和可靠性直接关系到生产线的运行效率。PN/PN耦合器作为跨子网通信的关键设备&#xff0c;其配置方式的选择往往让工程师陷入纠结。本文将深入…...