<body>

<script>

function changeImage(){

    var s = document.getElementById('myimage');

    s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";

}

</script>

<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="" height="">

<p>点击灯泡就可以打开或关闭这盏灯</p>

</body>
以上实例中代码 element.src.match("bulbon") 的作用意思是：
检索 <img> 里面 src 属性的值有没有包含 bulbon 这个字符串，
如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，
若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif
match方法

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

　该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

 

javascript 两张图片切换 三目运算符的更多相关文章

  1. echarts常用方法，legend状态支持两张图片切换（四）

    在UI设计的时候,可能我们在使用echarts时,legend是用图片渲染的,未选中的legend是用置灰的图片展示的.即彩色图片,置灰图片交互切换. 主要代码如下: //图例事件 let lgdt ...

  2. mui 顶部选项卡的两种切换方式

    mui 顶部选项卡的两种切换方式 第一种main页面 <!DOCTYPE html> <html> <head> <meta charset="ut ...

  3. 使用CSS3中Canvas 实现两张图片合成一张图片【常用于合成二维码图片】

    CSS3 Canvas 实现两张图片合成一张图片 需求 需求:在项目中遇到将一张固定图片和一张二维码图片合成一张新图片,并且用户能够将图片保存下载到本地. 思路:使用 CSS3 中的 Canvas 将 ...

  4. opencv_判断两张图片是否相同

    QQ:231469242 pip install opencv 如果找不到版本,去非官方下载opencv第三方包http://www.lfd.uci.edu/~gohlke/pythonlibs/ 下 ...

  5. HTML两张图片叠加问题的进一步修改

    要想两张图片叠加,只需在circle添加一个Position:absolute就OK了 以上几步,很多大侠前辈都已经说过,相信不用再啰嗦,我想说的是一种扩展,将示例放到右边,可能因为我悟性低,研究了一 ...

  6. Java 比较两张图片的相似度

    import java.awt.image.BufferedImage; import java.io.File; import javax.imageio.ImageIO; /** * 比较两张图片 ...

  7. iOS把两张图片合成一张图片

    0x00 步骤 先读取两张图片把创建出CGImageRef 创建上下文画布 把图片依次画在画布指定位置上 从上下文中获得合并后的图片 关闭上下文 释放内存 0x01 代码实现 - (void)comp ...

  8. JavaScript实现回车键切换输入框焦点

    用JavaScript实现回车键切换输入框焦点的功能,不是回车换行哦,在Textarea中,回车换行是默认功能,不过若要在textarea中使用 回车切换输入框焦点功能的话,回车换行就要失效了,不过i ...

  9. javascript两种定时器的使用及其清除

    <!--示例代码如下:--><!DOCTYPE html> <html> <body> <p>A script on this page s ...

随机推荐

  1. noip模拟【tea】

    tea [题目描述]有n个容量为V的瓶子,第i个瓶子中装着a[i]个单位的tea,使所有瓶子内的tea在不 超过其容量的前提下,非空的瓶子最少.在一个单位时间内,可以同时将多个瓶子中的tea倒入另外多 ...

  2. SpringBoot Redis使用fastjson进行序列化

    在使用spring-data-redis,默认情况下是使用org.springframework.data.redis.serializer.JdkSerializationRedisSerializ ...

  3. html 之 body topmargin、leftmargin、rightmargin、bottomnargin

    基本语法 <body topmargin=value leftmargin=value rightmargin=value bottomnargin=value> 语法说明 通过设置top ...

  4. WSL及Linux入门

    win10内置linux子系统(Windows Subsystem for Linux),可以不用安装Vmware等虚拟机学习linux啦. wsl开启方式 设置打开开发人员模式. 控制面板-程序和功 ...

  5. P4091 [HEOI2016/TJOI2016]求和

    留待警戒 FFT的时候长度要写的和函数里一样啊XD 瞎扯 这是个第二类斯特林数的理性愉悦颓柿子题目 颓柿子真的是让我hi到不行啦(才没有) 前置芝士 一个公式 \[ \sum_{i=0}^n t^i ...

  6. (转) Dissecting Reinforcement Learning-Part.2

    Dissecting Reinforcement Learning-Part.2 Jan 15, 2017 • Massimiliano Patacchiola 原文链接:https://mpatac ...

  7. 【matlab】笔记_1

    基本操作 ans 最近计算的答案 clc 清除命令行窗口 diary 将命令行窗口文本保存到文件中 矩阵 用逗号 (,) 或空格分隔各行元素. 用分号(;)分隔各列元素. a':装置矩阵. 要执行元素 ...

  8. .Net Core项目在Docker上运行，内存占用过多导致pods重启的问题

    默认情况下,.NET Core应用的内存回收模式是Server模式,这种情况下,内存占用和服务器核心数量有关,一半占用量比较大. 我们的应用目前吞吐量都不大,可以采用Workstation模式,这种模 ...

  9. Tomcat下webapps夹中root文件夹作用及如何发布项目至root文件夹中

    转载请注明出处: tomcat的root文件夹下面默认是tomcat的管理程序,但是如果你把自己的web项目发布到root下面的话,你可以不通过项目名直接访问你的项目,比如,你见了一个名为Test的项 ...

  10. jquery.form.js实现将form提交转为ajax方式提交的方法

    本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完 ...