通过JS将图像的src与更改字母的变量组合起来，将其细化为变量。

Question

我有一个可变的变化字母，在某些特定的时间间隔变化。现在，在这个快速轮盘赌中，我也想添加一些与这些字母结合在一起的图片。

例如：

“信”

“信”

“信”

“Image.jpg”

“Image.jpg”

“Image.jpg”

“信”

“信”

这里，动作中的片段：

https://codepen.io/cat999/pen/bGBBVgm

代码部分非常简单，请看：

var a = [, 'A', 'a', 'B', 'b', 'C', 'c', 'De', 'De', 'S', 's', 'T', 't', 'U', 'u', 'D', 'd', 'I', 'i', 'O', 'o', 'A', 'a', 'B', 'b', 'C', 'c', 'De', 'De', 'S', 's', 'T', 't', 'U', 'u', 'D', 'd', 'I', 'i', 'O', 'o', 'A', 'a', 'B', 'b', 'C', 'c', 'De', 'De', 'S', 's', 'T', 't', 'U', 'u', 'D', 'd', 'I', 'i', 'O', 'o',
    'image.jpg',
    'image.jpg',
    'image.jpg',
];

c = 0, 5;
setInterval(function() {
    c++;
    var letter = a[c];
    var length = a.length;
    if (c > length) { c = 0, 5; }
    $("body").text(letter);
}, 25);

你能帮我修改一下我的变量吗？也能在这个快速轮盘赌中出现图像("image.jpg")吗？

期待你宝贵的帮助

Answer 1

如果最后4个字符是.jpg或.png，那么添加一个检查如何?然后显示一个<img>元素，它的src指向图像。

点击“运行代码片段”(从google的徽标中获取的图像，因为它很小，而且加载速度很快)

​

var a = [, 'A', 'a', 'B', 'b', 'C', 'c', 'De', 'De', 'S', 's', 'T', 't', 'U', 'u', 'D', 'd', 'I', 'i', 'O', 'o', 'A', 'a', 'B', 'b', 'C', 'c', 'De', 'De', 'S', 's', 'T', 't', 'U', 'u', 'D', 'd', 'I', 'i', 'O', 'o', 'A', 'a', 'B', 'b', 'C', 'c', 'De', 'De', 'S', 's', 'T', 't', 'U', 'u', 'D', 'd', 'I', 'i', 'O', 'o',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
];

c = 0, 5;
setInterval(function() {
    c++;
    var letter = a[c];
    var length = a.length;
    if (c > length) { c = 0, 5; }
    
  if(letter != undefined && letter.length>5 && (letter.substr(letter.length-4, 4)==".png" || letter.substr(letter.length-4, 4)==".jpg") ) {
    $("#mydiv").html("<img src='"+letter+"'>");
  } else { 
    $("#mydiv").text(letter);
  }
}, 25);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv"></div>

​