Javascript 使用jquery进行背景颜色更改转换

这就是我想要实现的目标：

用户可以选择添加更多年份（一个带有文本和渐变中下一种颜色的新圆圈）

所以我正在做的是构建一个div，通过重复它自己，它可以构建上面的图像

这是标记：

     <a href="javascript:void(0)" class="timeline_box">
        <span class="timeline_dot"></span>
        <span class="timeline_year">2003</span>
    </a>

这就是我得到的：

如果我重复时间线框，它开始构建良好：

客户现在可以更改年份，但问题是圆圈的背景颜色将始终保持不变，我想找到一种方法来使用jquery进行更改，即每过一年，圆圈的背景将在渐变或类似的情况下获得下一种颜色

---

有什么想法吗？

从来没有尝试过这种方法——在遵循颜色渐变或其他方法的同时改变颜色。我想这会比现在更棘手。hsl颜色格式使它非常容易实现。为了“跟随梯度”，你只需要不断增加hsl中的h——逻辑很简单

下面是javascript：

var $box = $('.timeline_box'),
    h_val = 0;

function addBox () {
  var $new_box = $box.clone();
  h_val += 17; //change this value to change the amount of color change

  $new_box
    .find('.timeline_dot')
    .css('background', 'hsl('+ h_val +', 100%, 68%)') //change the "s" and "l" values to your liking
    .end()
    .appendTo('body'); 
}

$('#el').on('whatever', addBox);

甚至不需要在某个点将h重置为0。h可以继续下去，它只会继续循环梯度

---

这里有一个jsbin:

不尝试让您重新编写整个过程，但我认为这是SVG的一个很好的候选。如果你感兴趣的话，看看拉斐尔。谢谢Shaggy，我会查raphaeljs的！

var $box = $('.timeline_box'),
    h_val = 0;

function addBox () {
  var $new_box = $box.clone();
  h_val += 17; //change this value to change the amount of color change

  $new_box
    .find('.timeline_dot')
    .css('background', 'hsl('+ h_val +', 100%, 68%)') //change the "s" and "l" values to your liking
    .end()
    .appendTo('body'); 
}

$('#el').on('whatever', addBox);