最直覺的做法是分別做出0.gif, 1.gif, ... 9.gif等10個圖檔，再輸出<img src="0.gif" /><img src="2.gif" />標籤就可以搞定。但這樣有幾個小缺點:
事實上，透過一點CSS小技巧，就可以將全部的數字依序放在同一個圖檔，再利用 overflow:hidden; margin-left設負值等CSS技巧達到只顯示特定區域圖片的裁切效果。請看以下示範:
<style type="text/css">
.clsDigit
{ overflow: hidden;
padding: 0px;
width: 15px;
}
</style>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
function dispNum(num) { var tbl = $("<table cellspacing='0' cellpadding='0'><tr></tr></table>"); var tr = tbl.find("tr"); var s = num.toString();
for (var i = 0; i < s.length; i++) { var d = parseInt(s.substr(i, 1));
if (d == 0) d = 9; else d--;
tr.append(
"<td><div class='clsDigit'>" +
"<img src='set16.gif' style='margin-left:" +
(-15 * d).toString() + "px' /></div></td>");
}
return tbl;
}
$(function() { $("#dvDisp").append(dispNum("0223939889")); });
</script>