美文网首页LOVETOO-前端编程程序员
JavaScript:改变 HTML 图像,来回变换

JavaScript:改变 HTML 图像,来回变换

作者: 车文烨 | 来源:发表于2018-02-20 23:51 被阅读8次

在正常情况下,连续点击是来回变换的,但是有一种情况会发生错误或者说只变化一次:
原因:检索图片链接字段的c.src.match('a')里面的a不可以只是一个阿拉伯数字(可以数字和字母组合(第一个是数字的组合也可以))!

正常:
html:
<img src="./images/2018-a.jpg" id="tupian" onclick="changeImg()">

js:
function changeImg(){
c=document.getElementById("tupian");
if (c.src.match('b')) {
c.src="./images/2018-a.jpg";
}
else{
c.src="./images/2018-b.jpg";
}
}

发生错误或者只变化一次:
html:
<img src="./images/2018-1.jpg" id="tupian" onclick="changeImg()">

js:(发生错误)
function changeImg(){
c=document.getElementById("tupian");
if (c.src.match('2')) {
c.src="./images/2018-1.jpg";
}
else{
c.src="./images/2018-2.jpg";
}
}

js:(只变化一次)
function changeImg(){
c=document.getElementById("tupian");
if (c.src.match('1')) {
c.src="./images/2018-2.jpg";
}
else{
c.src="./images/2018-1.jpg";
}
}

测试地址:http://cuanyair.com/js-test/

相关文章

  • JavaScript:改变 HTML 图像,来回变换

    在正常情况下,连续点击是来回变换的,但是有一种情况会发生错误或者说只变化一次:原因:检索图片链接字段的c.src....

  • 图像的几何变换1

    图像的几何变换又称为图像空间变换,它将一幅图像中的坐标位置映射到另一幅图像中的新生位置。几何变换不改变图像的像素值...

  • JavaScript HTML DOM

    JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML ...

  • JS Dom Tree

    JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML ...

  • JavaScript HTML DOM - 改变 HTML

    HTML DOM 允许 JavaScript 改变 HTML 元素的内容。 ** 改变 HTML 输出流**Jav...

  • 改变 HTML 样式

    HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢? 语法...

  • 几何变换

    相对于点操作改变了图像的值域范围,几何变换关注于改变图像的定义域。原先采用的方法是全局参数化2D变换,之后...

  • DOM思维导图

    改变 HTML 改变 HTML 输出流在 JavaScript 中,document.write() 可用于直接向...

  • 001.opencv图像几何变换

    1. 数学背景 1. 几何变换的含义:改变图像的几何位置、形状、尺寸等几何特征 1.1 位置变换:(刚性变换) 平...

  • HTML5 - Canvas

    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 Canvas 绘制图像 在使用 ...

网友评论

    本文标题:JavaScript:改变 HTML 图像,来回变换

    本文链接:https://www.haomeiwen.com/subject/cibgtftx.html