如何获得重复模式

问题描述：

我有一个文本框，用户输入整数。然后我想列出数字直到用户输入的整数。该名单将首先是红色，其次是黄色，第三名是绿色。这种模式将再次重演。像第四个将是红色，第五个将是黄色，第六个将是绿色等等。如何获得重复模式

如果用户输入12，它将变为：1（红色），2（黄色），3（绿色），4（红色），5（黄色）...所以.. 12.

我可以根据EVen和奇数区分整数，但在这种情况下，我们有3个不同的选项：红色，黄色和绿色。

看（https://developer.mozilla.org/en-US/docs /Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_(.25）） - http://jsfiddle.net/arunpjohny/Lhg3pL56/1/ – 2014-11-21 05:54:29

使用[nth-child selector]可以在CSS中轻松完成颜色（ https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child）。 – nnnnnn 2014-11-21 06:20:10

答

我认为你可以轻松地生成一个循环中的数字。至于识别模式的话，你可以简单地做这种检查（伪代码）：

num are values generated from 1 to whatever you want to be. 

(num - 1) % 3 = 0 --> Color should be red 
(num + 1) % 3 = 0 --> Color should be yellow 
    num % 3 = 0  --> Color should be green

希望它可以让你在正确的方向开始。

答

你所寻找的是在[余运算符]的remainder operator

var num = 12; 
 
var list = [], 
 
    colors = ['red', 'green', 'blue']; 
 
for (var i = 0; i < num; i++) { 
 
    list.push('<span class="' + colors[i % colors.length] + '">' + (i + 1) + '</span>') 
 
} 
 

 
var html = list.join(''); 
 
//add it to the dom to view 
 
$('body').append(html);

.red { 
 
    color: red; 
 
} 
 
.green { 
 
    color: green; 
 
} 
 
.blue { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

答

<?php 
     $limit = 10; 

     $color = array('red','yellow','green'); 

     for($i=0;$i<=$limit;$i++) 
      { 
       echo "<span style='color:".$color[$i%3]."'>$i</span>"; 

      } 

    ?>

如何获得重复模式

相关推荐