随笔 - 317, 文章 - 0, 评论 - 453, 阅读 - 114万
  博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

JS 像素数字

Posted on   PHP-张工  阅读(1709)  评论(1编辑  收藏  举报

输入数字:

 

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!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>



编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· DeepSeek智能编程
· 精选4款基于.NET开源、功能强大的通讯调试工具
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
点击右上角即可分享
微信分享提示