如何使用程序从行的中间用 8 个不同的代码填充 128 个框

Question

我要用不同的编号填满128个方框。颜色。

假设我有 8 种颜色来填充这些框，请检查下面的视觉表示以获得预期的输出。

我已经尝试使用 Javascript，但没有得到预期的结果，

window.onload = function() {
    var res = ''
    ,   order = {}
    ,   levels = {'#': 'red', '&': '#009688', 'O': '#FF9800', '@': '#FFEB3B', '%': '#9C27B0', '*': '#2196F3', '^': '#00BCD4', '-': '#FF9800'}
    ,   symbols = Object.keys(levels)
    ,   totalLevels = symbols.length;


    for (i=0; i < 128; i++) { order[i+1] = ' ';  }
    var ids = '';
    for (v=1; v <= 8; v++) {
        var level = v;
        var times = Math.ceil(128/level);
        ids += 'Level ' + level + ' (Times: '+ times + ') : &nbsp;&nbsp;&nbsp;&nbsp;';

        console.log(times);
        for (i=1; i <= times; i++) {
            var idx = i * (times-1);
            if (idx <= 128) {
                order[idx] = symbols[level-1];
                ids += (idx-1) + ', ';
            }
        }

        ids += '<br />';
    }

    var row1 = '<td>&nbsp;</td>'
    ,   row2 = '<td class="header red">Symbol</td>'
    Object.entries(order).map(function(item, i) {
        var symbol = item[1]
        ,   color  = symbol != ' ' ? levels[symbol] : '';

        row1 += '<td style="font-weight: bold;">'+ item[0] + '</td>';
        row2 += '<td style="'+ (color != '' ? 'background: '+ color +'; font-weight: bold; color: #fff;' : '') +'">'+ symbol + '</td>';
    });


    // Color bar
    bar = '<div id="color-bar">';
    Object.entries(levels).map(function(item, i) {
        bar += '<div class="code" style="background: '+ item[1] +'">'+ item[0] +'</div>';
    });

    bar += '<div>'+ ids + '</div>';
    bar += '</div>';

    document.getElementById('result').innerHTML = bar +'<table><tr>' + row1 + '</tr><tr>' + row2 + '</tr></table>';
}

table {
    margin-top: 20%;
}
td {
    padding: 10px;
    text-align: center;
    min-width: 100px;
    min-height: 100px;
    border-bottom: 1px dotted #ccc;
    border-right: 1px dotted #ccc;
}

.header {
    background: #eee;
    font-weight: bold;
}

.red {
    background: #f33;
    font-weight: bold;
}

#color-bar {
    width: 100%;
    position: fixed;
    top: 10px;
}

#color-bar .code {
    width: 10%;
    text-align: center;
    padding: 15px;
    font-weight: bold;
    display: inline-block;
}

        <div id="result"></div>

貌似逻辑不对！，如有错误请指正。谢谢，

我只是在深入寻找逻辑。任何编程语言都适合我。（C/C++，Python，PHP，JAVA，Javascript，甚至 shell 脚本！）

Answer 1

此公式与您的描述不符：

 Math.ceil(128/level);

因为你描述的是二的幂 (64, 32, ...)，但这里你得到的结果类似于 128/3 = 43。

虽然不是精确匹配（请参阅我在问题下方的评论），但您可以计算数字的二进制表示形式中尾随零的数量，并从零开始计数（所以 0..127）：

decimal	7-bit binary	# trailing zeroes	color
0	0000000	7	red
1	0000001	0	gray
2	0000010	1	purple
3	0000011	0	gray
4	0000100	2	orange
...	...	...	...
8	0001000	3	cyan
...	...	...	...
16	0010000	4	yellow
...	...	...	...
32	0100000	5	blue
...	...	...	...
64	1000000	6	green
...	...	...	...
127	1111111	0	gray
128	0000000	7	red

那么算法可以是位校验算法：

let colors = ["gray", "purple", "orange", "cyan", "yellow", "blue", "green", "red"];
let container = document.getElementById("content");
for (let i = 0; i <= 128; i++) {
    let zeroes = Math.min(7, 31 - Math.clz32(i ^(i-1)));
    let color = colors[zeroes];
    let div = document.createElement("div");
    div.textContent = i;
    div.style.background = color;
    container.appendChild(div);
}

#content div {
    width: 50px;
    height: 20px;
    border: 1px solid;
    margin: 3px;
    text-align: center;
    color: white;
}

<div id="content"></div>

公式解释

公式为Math.min(7, 31 - Math.clz32(i ^(i-1))).

i ^ (i-1) 给出当所有二进制 1 位仅保留最低有效位而所有其他位都变为零时的值。
Math.clz32 是一个鲜为人知的函数，它计算给定数字的前导零（32 位二进制）。
从 31 中减去它得到尾随个零的数量。
Math.min(7, ...) 我们想要得到一个介于 0 和 7 之间的数字（尾随零）。这最后一步避免了超出范围的值（我们会得到 0）。

如何使用程序从行的中间用 8 个不同的代码填充 128 个框

How to fill 128 boxes with 8 different code from mid of the row using program

javascript

algorithm

sorting

bubble-sort

divide-and-conquer

公式解释