JS 像素数字

时间：2010-09-27 来源：张吉锋

输入数字：

源码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
    <div>
    输入数字：<input id="txtNum" type="text" onkeyup="showNum();" value="856" />
    <div id="divNum" style=" position:relative; margin-top:5px;"></div>
    <script type="text/javascript">
    function showNum()
    {
                var txtNum = document.getElementById('txtNum');
                var divNum = document.getElementById('divNum');
                if(isNaN(txtNum.value))
                {
                        return;
                }
                divNum.innerHTML = '';
                var width = Math.floor(divNum.offsetHeight / 5);
                for(var i=0; i<txtNum.value.length; i++)
                {
                        var index = parseInt(txtNum.value[i]);
                        var strNum = arrNum[index];
                        for(var j=0; j<strNum.length; j++)
                        {
                                if(strNum[j] == '1')
                                {
                                        var div = getDiv(width);
                                        div.style.left = j % 3 * width + i * width * 4;
                                        div.style.top = Math.floor(j / 3) * width;
                                        divNum.appendChild(div);
                                }
                        }
                }
    }
    
    var arrNum = [
                '111101101101111',
                '001001001001001',
                '111001111100111',
                '111001111001111',
                '101101111001001',
                '111100111001111',
                '111100111101111',
                '111001001001001',
                '111101111101111',
                '111101111001111'
    ];
    
    function getDiv(width)
    {
                var div = document.createElement('div');
                div.style.width = width;
                div.style.height = width;
                div.style.backgroundColor = 'red';
                div.style.position = 'absolute';
                
                return div;
    }
    
    showNum();
    </script>
    </div>
    </form>
</body>
</html>