Question

如何写一段JS代码实现用图片替换一段数字

请教一下各位大大,如何使用js或者jq实现这么一个功能..

我有一个统计数字我想将其换为图片显示我有图片0.png-9.png
html代码是这样<div class="main"><p id="id="statistics">12345(这里都是数字)</p></div>
我想使用js将id statistics里的数字都替换为图片,数字对应图片0.png-9.png
经过js转换后希望成为<div class="main"><img src="1.png"><img src="2.png"></div>
这样之类的 请问怎样写JS代码可以实现,JQ也可以
有其他可以实现将这里面的数字转换为图片的方法也可以
对不起,非常抱歉...可能是我没把问题描述好...非常感谢回答..
但是问题是这样的, 我是通过php函数输出的一个人数统计 只会输出在线人数数字,我想将这段数字拆解开然后每个数字生成一张对应的0-9.png这样的图片 请问怎样能实现

Answer 1

<script type="text/javascript">
$(function(){
var str="123454321"; //这里写你的数字
var sta=$(".main");
sta.html('');
str2="";
for(var i=0;i<str.length;i++){
str2=str2+"<img src='images/"+str.charAt(i)+".jpg'/><br/>";
}
sta.html(str2);
})
</script>

Answer 2

$(function() {
    var nums = $("#statistics").text().split("");
    var html = "";
    for(var i = 0; i < nums.length; i++) {
        html += '<img src="' + nums[i] + '.png" />';
    }
    $("#statistics").parent().html(html);
});

根据你问题的补充，更新一下回答。上面的代码没有变

<div class="main"><p id="statistics">385</p></div>

会变成

<div class="main"><img src="3.png" /><img src="8.png" /><img src="5.png" /></div>

你问题中有一处错误，<p id="id="statistics"> 这里面多些了一个 id="

Answer 3

//图片路径
var imgs=['0.png','1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png'];
//与图片路径对应的数字字符
var ns='0123456789'.split('');
//测试数字
var number=1234;
//结果输出
var output='';
//转换成字符串（逐个字符对比）
number=number+'';
//遍历测试数字字符串
for(var i=0;i<number.length;i++){
//遍历与图片路径对应的数字字符
for(var j=0;j<ns.length;j++){
//字符对比（找到相同的字符就退出本次循环以减少循环次数）
if(number[i]==ns[j]){
output+='<img src="'+imgs[j]+'" width="12" height="12" />';
break;
}
}
}
alert(output);//弹出来看看
/*有了output那你就可以写到需要展示出来的地方了*/