个性化数字显示
我们有时在做可视化界面的时候需要显示一些个性化的数字。例如这样
。通常我们可以设计0~9的数字图片，然后通过JavaScript来实现个性化数字的显示。
1. 首先我们需要定义一个DIV来存放数字。
<body> <div id="numberBox"></div> </body>
2. 我们可以制作一个图片背景，通过CSS来完成div的布局
<style> #numberBox { background-image: url(../images/counts.png); background-repeat: no-repeat; background-size: 100% 100%; -moz-background-size: 100% 100%; float: left; margin: 30px 0px 0px 0px; width: 100px; height: 80px; z-index: 1; text-align: center; } #numberBox Img { text-align: center; margin: 25px 0px 0px 0px; width: 18%; height: 20%; } </style>
3. 最后我们通过JavaScript在div中添加img来实现个性化数字的显示
<script>
/**
* 设置个性化数字显示
* @method setCountsValue
* @param {int} value 数字
*/
function setNumberBoxValue(value) {
var imgBox = document.getElementById('numberBox');
if (imgBox) {
//1. 如果div的childNodes不为空，则删除这些节点
while (imgBox.hasChildNodes()) {
var oImg = imgBox.lastChild;
imgBox.removeChild(oImg);
}
//2. 添加新的节点
var str = new String(value);
for (var i = 0; i < str.length; i++) {
var roundImg = document.createElement('img');
roundImg.src = 'images/0' + str.charAt(i) + '.png';
imgBox.appendChild(roundImg);
}
}
}
setNumberBoxValue(123344);
</script>
总结：上面我们通过代码展示了如何通过DIV+CSS+JS显示个性化数字。本文的重点在于如何删除DIV中的Img和添加Img到DIV中，类似的说明文章也有很多，经过查阅js学习资料，最后发现通过hasChildNodes和removeChild两个方法组合，利用while循环可以很好实现div中的节点删除。
完整代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>个性化数字显示</title> <style> #numberBox { background-image: url(../images/counts.png); background-repeat: no-repeat; background-size: 100% 100%; -moz-background-size: 100% 100%; margin: 30px 0px 0px 0px; width: 100px; height: 80px; z-index: 1; text-align: center; } #numberBox Img { text-align: center; margin: 25px 0px 0px 0px; width: 18%; height: 20%; } </style> </head> <body> <div id="numberBox"></div> <script> /** * 设置个性化数字显示 * @method setCountsValue * @param {int} value 数字 */ function setNumberBoxValue(value) { var imgBox = document.getElementById('numberBox'); if (imgBox) { //1. 如果div的childNodes不为空，则删除这些节点 while (imgBox.hasChildNodes()) { var oImg = imgBox.lastChild; imgBox.removeChild(oImg); } //2. 添加新的节点 var str = new String(value); for (var i = 0; i < str.length; i++) { var roundImg = document.createElement('img'); roundImg.src = 'images/0' + str.charAt(i) + '.png'; imgBox.appendChild(roundImg); } } } setNumberBoxValue(123344); </script> </body> </html>
