Forloop混乱

Question

嘿大家我在试图设置这个forloop时遇到了问题..但是我失败了

如果你看一下这张照片

我需要将这些小点与大数字相同，具体取决于它们所在的部分。

我通过for循环在首页添加元素

R

因此，例如1-5,11-15,21-25,31-35,41,45将是红色

我需要使用正则表达式吗？

Answer 1

您可以使用以下函数将0到99之间的整数作为输入，并输出节号（1到4）：

((n % 10 > 4) ? 1 : 2) + ((n > 49) ? 2 : 0)

最终结果由两部分组成：

• ((n % 10 > 4) ? 1 : 2) - 此部分检查数字是以0-4还是5-9结尾。在前一种情况下，输出1.在后一种情况下，输出2.
• ((n > 49) ? 2 : 0) - 如果n为50或更高，则在最终结果中加2（以区分1,2和3,4节）。

此公式在以下演示中的getSectionNumber(n)函数中实现：

＆＃13;

＆＃13;

var table = document.querySelector('table tbody');

// n is a number between 0 and 99
// output is a section (1 - 4)
function getSectionNumber(n) {
  return ((n % 10 > 4) ? 1 : 2) + ((n > 49) ? 2 : 0);
}

var sectionColors = {
  1: 'darkred',
  2: 'darkblue',
  3: 'darkgreen',
  4: 'yellow'
};

for(var i = 0; i < 10; i++) {
  var row = document.createElement('tr');
  table.appendChild(row);
  for(var j = 0; j < 10; j++) {
    var cell = document.createElement('td');
    var cellId = i*10 + j
    cell.textContent = cellId;
    cell.style.backgroundColor = sectionColors[getSectionNumber(cellId)];
    row.appendChild(cell);
  }
}

＆＃13;

<table>
  <tbody>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用三元运算符：

for(i = 1; i < 101 ; i++){
    var color = ((i%10 != 0 && i%10 <= 5) && i<51) ? "red" 
    : ((i%10 === 0 || i%10 > 5) && i<51) ? "green" 
    :((i%10 != 0 && i%10 <= 5) && i>=51) ? "blue" 
    : "pink";
    console.log(i + " - " + color)
}

由于SO片段没有console.log所有100个值，这里是一个JSfiddle：https://jsfiddle.net/jcky4dkp/1/

这段代码有什么作用？

第一个条件检查数字的最后一位数是否小于6，数字本身是否小于51：

(i%10 != 0 && i%10 <= 5) && i<51

如果这是真的你会有“红色”，否则它将检查第二个条件，如果数字的最后一个数字是否大于5并且数字本身是否小于51：

(i%10 === 0 || i%10 > 5) && i<51

如果这是真的你会有“绿色”，否则它将检查第三个条件，如果数字的最后一个数字小于6并且数字本身是否大于51：

(i%10 != 0 && i%10 <= 5) && i>51

如果这是真的你将有“蓝色”，否则，它将返回“粉红色”