Question

我正在尝试用图像替换文本（每个角色都有自己的图像），能够更新页面上的文本和相应的图像。

例如，我希望能够输出：带有图像的“SCORE：1,034”，并能够在用户进行时更新分数。随着分数越来越高，需要更多的逗号，会有额外的数字列等等.0 - ＆gt; 103 - ＆gt; 1,034 - ＆gt; 102,304等。

我想我可能会有一个单独的“SCORE”图像，然后是每个数字和一个逗号的图像，但是我在编写一个用每个字符替换相应图像的函数时遇到了麻烦。

使用JavaScript / jQuery和/或CSS有一种简单的方法吗？

谢谢！

Answer 1

你想要一个数组来保存每个数字图像网址的网址：

var digitImages = [
    'http://example.com/0.jpg', 
    'http://example.com/2.jpg', 
    'http://example.com/3.jpg', 
    'http://example.com/4.jpg', 
    'http://example.com/5.jpg', 
    'http://example.com/6.jpg', 
    'http://example.com/7.jpg', 
    'http://example.com/8.jpg', 
    'http://example.com/9.jpg'
];

然后是一个简单的路由，查找digitImages内的每个数字。

var imgs = [];
var text = 130.toString();

for(var i = 0; i < text.length; i++)
{
   var index = parseInt(text[i], 0);
   imgs.push(new Image(digitImages[index]));
}

现在imgs数组的内容应该是数字130的所有图像元素，可以附加到div或其他容器元素。

Answer 2

最简单的方法是使用一个带数字并添加逗号的函数，然后用图像替换字符。

示例功能

function C(a,b){return(a+"").replace(/\d+/,function(a){return a.replace(/\d(?=(?:\d{3})+(?!\d))/g,"$&"+(b||','))})}

C(1001)//returns 1,001

你怎么能用图像复制字体？

2 个答案: