<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. 为什么不能用drop function add 去删除函数? 因为不能使用 mysql中的保留字!

    mysql中有很多的 保留字, 也叫关键字, 你在使用 数据库中的任何东西, 都最好是 避开这些关键字/保留字, 包括 数据库名, 表名, 字段名, 函数名, 存储过程名. 这些关键字包括: mysq ...

  2. Python实现机器学习算法：AdaBoost算法

    Python程序 ''' 数据集:Mnist 训练集数量:60000(实际使用:10000) 测试集数量:10000(实际使用:1000) 层数:40 ------------------------ ...

  3. VHDL 乐曲演奏电路设计

    前言 无源蜂鸣器在直流信号下不会响,需要方波驱动.输入不同频率的方波会发出不同音调的声音,方波的幅值决定了声音的响度. 目标 乐曲发生电路在节拍(4Hz)的控制下根据乐谱产生合适的分频系数.分频器根据 ...

  4. 5+ App开发打包指南

    HTML5 Plus应用概述 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实 ...

  5. 查看iis对应w3wp.exe显示的进程ID号

    1.任务管理器,查看,选择列,选择PID(进程标识符) 2.通过cmd查询: 管理员身份运行cmd,跳转到C:\Windows\System32\inetsrv目录,然后运行appcmd list w ...

  6. React Naive 解决防止多次点击的解决方法

    export default class TouchableOpacity extends Component { render() { return ( <TouchableOpacity a ...

  7. input标签让光标不出现

    <input  class="red" readonly unselectable="on" > input点击变为搜索框,用form包住绑定搜索事 ...

  8. JAVA关于泛型的笔记

    1.Java SE 5.0中增加泛型机制的主要原因是为了满足在1999年制定的最早的Java规范需求之一(JSR 14). 2.使用泛型机制编写的程序代码要比那些杂乱的使用Object变量,然后再进行 ...

  9. ubuntu 安装pip3 遇到Ignoring ensurepip failure: pip 8.1.1 requires SSL/TLS错误

    3.5版本之后的会自动安装pip,所以我们直接从官网下载3.5.2,下载地址:https://www.python.org/ftp/python/ 下载以后,可以用命令解压,也可以右键进行解压, ta ...

  10. log4net配置使用

    1.配置文件 app.config <?xml version="1.0" encoding="utf-8" ?> <configuratio ...