javascript 两张图片切换 三目运算符
<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 两张图片切换 三目运算符的更多相关文章
- echarts常用方法，legend状态支持两张图片切换（四）
在UI设计的时候,可能我们在使用echarts时,legend是用图片渲染的,未选中的legend是用置灰的图片展示的.即彩色图片,置灰图片交互切换. 主要代码如下: //图例事件 let lgdt ...
- mui 顶部选项卡的两种切换方式
mui 顶部选项卡的两种切换方式 第一种main页面 <!DOCTYPE html> <html> <head> <meta charset="ut ...
- 使用CSS3中Canvas 实现两张图片合成一张图片【常用于合成二维码图片】
CSS3 Canvas 实现两张图片合成一张图片 需求 需求:在项目中遇到将一张固定图片和一张二维码图片合成一张新图片,并且用户能够将图片保存下载到本地. 思路:使用 CSS3 中的 Canvas 将 ...
- opencv_判断两张图片是否相同
QQ:231469242 pip install opencv 如果找不到版本,去非官方下载opencv第三方包http://www.lfd.uci.edu/~gohlke/pythonlibs/ 下 ...
- HTML两张图片叠加问题的进一步修改
要想两张图片叠加,只需在circle添加一个Position:absolute就OK了 以上几步,很多大侠前辈都已经说过,相信不用再啰嗦,我想说的是一种扩展,将示例放到右边,可能因为我悟性低,研究了一 ...
- Java 比较两张图片的相似度
import java.awt.image.BufferedImage; import java.io.File; import javax.imageio.ImageIO; /** * 比较两张图片 ...
- iOS把两张图片合成一张图片
0x00 步骤 先读取两张图片把创建出CGImageRef 创建上下文画布 把图片依次画在画布指定位置上 从上下文中获得合并后的图片 关闭上下文 释放内存 0x01 代码实现 - (void)comp ...
- JavaScript实现回车键切换输入框焦点
用JavaScript实现回车键切换输入框焦点的功能,不是回车换行哦,在Textarea中,回车换行是默认功能,不过若要在textarea中使用 回车切换输入框焦点功能的话,回车换行就要失效了,不过i ...
- javascript两种定时器的使用及其清除
<!--示例代码如下:--><!DOCTYPE html> <html> <body> <p>A script on this page s ...
随机推荐
- Python3 tkinter基础 Frame bind 捕捉多键同时按
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- Python3基础 list + *运算 扩充列表
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- CentOS 安装 Gitlab
源地址 https://mirror.tuna.tsinghua.edu.cn/gitlab-ce/ # 清华源 https://mirrors.tuna.tsinghua.edu.cn/help/g ...
- 洛谷1968美元汇率 dp
P1968 美元汇率 dp 题目描述 在以后的若干天里戴维将学习美元与德国马克的汇率.编写程序帮助戴维何时应买或卖马克或美元,使他从100美元开始,最后能获得最高可能的价值. 输入输出格式 输入格式: ...
- CentOS7 系统升级，删除centos7开机界面多余选，升级至最新的内核
一:升级系统 1.检查系统版本: [root@localhost /]# cat /etc/redhat-release CentOS Linux release (Core) 2.运行yum命令升级 ...
- 【做题】apc001_f-XOR Tree——巧妙转化及dp
对树上的路径进行操作是十分难处理的事情.一开始的思路主要针对于\(a_i<=15\)这一特殊性质上.于是考虑了\(a_i<=1\)的情况,然而除了糊出一个适用范围极小的结论外,并没有什么用 ...
- MD5+salt 工具类
import java.io.UnsupportedEncodingException; import java.security.MessageDigest; import java.securit ...
- （转）Awesome Knowledge Distillation
Awesome Knowledge Distillation 2018-07-19 10:38:40 Reference:https://github.com/dkozlov/awesome-kno ...
- Component 初识组件
component组件是Vue学习的重点.重点.重点,重要的事情说三遍.所以你必须学好Vue component.其实组件就是制作自定义的标签,这些标签在HTML中是没有的.比如:<diy> ...
- A Simple Note on "P4FPGA: A Rapid Prototyping Framework for P4"
论文:P4FPGA: A Rapid Prototyping Framework for P4 Github:https://github.com/p4fpga Reference: Han Wang ...