Question

我的网站有一个倒计时时钟，我想这样做，而不是显示文字而是显示图片。

E.g。如果剩下200天，我会希望它显示一个带有2的图像，带有0的图像和带有0的另一个图像。

所以基本上我想要它，以便在文本中显示的每个数字将由图片显示。以下是输出文本的代码：

if(r.d != 0){out += r.d +" "+((r.d==1)?"day":"days")+" ";}
out += (r.h<=9?'0':'')+r.h +" "+((r.h==1)?"hour":"hours")+" ";
out += (r.m<=9?'0':'')+r.m +" "+((r.m==1)?"min":"mins")+" ";
out += (r.s<=9?'0':'')+r.s +" "+((r.s==1)?"sec":"secs")+" ";

它不断更新，因此我需要不断更新图片。

我已经能够创建一个，但每次重新加载浏览器时它只会更新图片。

我也不确定如何制作它，以便浏览器只加载图片，比如2张图片，而不是每次在计时器中出现2时重新加载图片。

Answer 1

这可以通过两种方式实现，如@Jasen的评论中所述，图像在CSS中设置为background-image，其中图像对应于该整数，例如，如果整数值为{ {1}}，为其分配了4类名称。

利用CSS背景图片：JS Fiddle 1

.number-4

var testDiv = document.getElementById('test');

clock();

function clock() {
  var d = new Date(),
    hour = d.getHours(),
    min = d.getMinutes(),
    sec = d.getSeconds(),
    theHTML = '',
    theData, item;

  min = (min < 10) ? '0' + min : min;
  sec = (sec < 10) ? '0' + sec : sec;
  theData = '200 Days, and ' + hour + ":" + min + ":" + sec;
  theData = theData.split('');

  for (var i = 0; i < theData.length; i++) {
    item = parseInt(theData[i]);
    if (isNaN(item)) {
      theHTML += '<span class="not-num">' + theData[i] + '</span>';
    } else {
      theHTML += '<span class="nums number-' + theData[i] + '"></span>';
    }
  }
  testDiv.innerHTML = theHTML;
  setTimeout(clock, 1000);
}

.not-num {
  font-size: 30px;
}

.nums {
  width: 50px;
  height: 80px;
  background-color: #EEE;
  border: 1px solid gray;
  margin: 30px 2px 2px 2px;
  text-align: center;
  background: #EEE no-repeat;
  display: inline-block;
}

.number-0 {background-image: url('//placehold.it/50x80/?text=0');}
.number-1 {background-image: url('//placehold.it/50x80/?text=1');}
.number-2 {background-image: url('//placehold.it/50x80/?text=2');}
.number-3 {background-image: url('//placehold.it/50x80/?text=3');}
.number-4 {background-image: url('//placehold.it/50x80/?text=4');}
.number-5 {background-image: url('//placehold.it/50x80/?text=5');}
.number-6 {background-image: url('//placehold.it/50x80/?text=6');}
.number-7 {background-image: url('//placehold.it/50x80/?text=7');}
.number-8 {background-image: url('//placehold.it/50x80/?text=8');}
.number-9 {background-image: url('//placehold.it/50x80/?text=9');}

或者用<div id="test">200 Days</div>元素替换每个整数字符并设置其img以使src具有相应的图像，除了此更改外，其他代码相同：

JS Fiddle 2

src

我们摆脱了CSS类if (isNaN(item)) { theHTML += '<span class="not-num">' + theData[i] + '</span>'; } else { theHTML += '<img src="//placehold.it/50x80?text=' +theData[i]+ '">'; }。

两个解决方案都做同样的事情，我们采用最后一个计时器“或倒计时”字符串，并使用javascript number-X函数将字符串转换为对象，如果是数字，我们.split()我们将其替换为和映像或设置其背景图像，否则只需将它们包装在另一个parseInt()类中，之后我们将最终字符串注入span.not-num div。

第一种解决方案更好，因为图像已经预先加载了。与使用更改#result值的图像不同，它在第一次刚好翻转后加载后不会闪烁。

需要倒数计时器来显示图片而不是单词并不断更新它们

1 个答案: