<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. Python 解析 XML 文件生成 HTML

    XML文件result.xml,内容如下: <ccm> <metric> <complexity>1</complexity> <unit> ...

  2. 如何清除浮动塌陷? float:left 塌陷

    参考文章: http://www.jb51.net/css/502268.html 原文链接:http://www.jianshu.com/p/a0500b54da13 只要给li的宽度, 规定得小一 ...

  3. luogu P2713 罗马游戏

    思路 模拟就好 左偏树合并 并查集寻找 代码 #include <bits/stdc++.h> #define FOR(i,a,b) for(int i=a;i<=b;++i) us ...

  4. LuoguP1072 Hankson的趣味题

    题目 原题链接 题解 题意即为 \[ gcd(x,a0)=a1 \\ lcm(x,b0)=b1 \\ 求x个数 \] 根据\(lcm\)的求解方式\(lcm(a,b)=a*b/gcd(a,b)\)可以 ...

  5. P4720 【模板】扩展卢卡斯

    思路 扩展Lucas和Lucas定理其实没什么关系 我们要求的是这样的一个问题 \[ \left(\begin{matrix}n\\m\end{matrix}\right) mod\ P \] p不一 ...

  6. P2153 [SDOI2009]晨跑

    思路 典型的最小费用最大流问题,拆点,每个点对应的入点和出点之间连一条cap=1的边表示只能经过一次的限制条件 然后其他边从u的出点连向v的入点即可 代码 #include <cstdio> ...

  7. 论文笔记之：Natural Language Object Retrieval

    论文笔记之:Natural Language Object Retrieval 2017-07-10  16:50:43   本文旨在通过给定的文本描述,在图像中去实现物体的定位和识别.大致流程图如下 ...

  8. 洛谷P2637第一次，第二次，成交！ 模拟？DP？

    今天水来一天,就贴道水吧.. 原题>>https://www.luogu.org/problem/show?pid=2637<< 题目描述 因为奶牛们的节食运动(奶牛还节食?) ...

  9. Katana的WebAPI集成Swagger 解决方案

    这位大哥写的博客很清楚了,我就不重复了. http://www.cnblogs.com/caodaiming/p/4156476.html 错误解决 http://blog.csdn.net/gold ...

  10. PHP中cookie思维导图