博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

JS 像素数字

Posted on 2010-09-27 14:01  PHP-张工  阅读(1702)  评论(1)  编辑  收藏  举报

输入数字：

 

源码： 

<!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="height:20px; 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>