一串数字用图片替换展示效果（固定展示6位数字，不够前补齐0）

本文链接：https://blog.csdn.net/elisunli/article/details/60141964

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf8"/>
</head>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
	$(function(){
		var len = 6;// 固定长度
		var theNum = 987+'';// 数值
		var len2 = theNum.length;// 数值长度
		// 用0前补齐数值，达到lenNum长度
		var replaceStr = 0 + '';
        for(var j=0;j<len - len2;j++) {
        	theNum = replaceStr + theNum;
        }
        theNum = theNum + '';

		// 获取第一个img的样式
		var imgFirst = $('#main123 img:first');
		var imgObj= imgFirst.clone(true);
		$('#main123').empty();

		

		// 循环数字替换图片
		for (var i=0;i<len;i++){
			var imgClone = imgObj.clone(true);
			var curNum = theNum[i]
			//var aImg = "<img src='my-img/"+curNum+".png'/>";
			var srcStr =imgClone.attr("src");
			srcStr = srcStr.substr(0,srcStr.lastIndexOf("/")+1) + curNum + srcStr.substr(srcStr.lastIndexOf(".png"),srcStr.length);
			imgClone.attr("src",srcStr);

			$('#main123').append(imgClone);
		}
	});
</script>
<body>

<div style="width:400px;height:170px;background-color:green;">
	 <div id="main123">
	 	 <img src="my-img/0.png"/>
     </div>
</div>

</body>