如何在每分钟添加2到当前值?

时间:2016-11-22 06:28:05

标签: php jquery html css

我的HTML和CSS代码就在这里。每个都没有。是在不同的跨度标签。 1分钟后需要152,242,2分钟后需要152,244等等。我试图用jquery做这件事,但我没有得到完美的输出。

#hp_header .number{
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-top: 40px;
}
#hp_header .number .number_inner{
    display: inline-block;
    text-align: center;
    color: #282828;
    font-family: SourceSansPro-Regular !important;
    font-size: 32px;
}
#hp_header .number .count{
    font-family: SourceSansPro-Regular !important;
    font-size: 32px;
    color: #f0f1b4;
    padding: 5px 10px;
    background-color: #282828;
    margin: 0px 5px;
}
#hp_header .number .members_count {
    width: 100%;
    float: left;
    margin-top: 10px;
    color: #282828;
    font-family: SourceSansPro-Regular !important;
    text-transform: uppercase;
    letter-spacing: 5px;
}
<div id="hp_header">
  <span class="number">
    <span class="number_inner">
      <span class="count">1</span>
      <span class="count">5</span>
      <span class="count">2</span>
      ,
      <span class="count">2</span>
      <span class="count">4</span>
      <span class="count">2</span>
    </span>
  </span>
</div>

提前致谢。

1 个答案:

答案 0 :(得分:4)

希望下面的代码可以帮到你。为测试我把2秒间隔(2000)。你可以每分钟制作一次(60000)

setInterval(oneSecondFunction, 2000);
function oneSecondFunction() {
   total = document.getElementsByClassName('count').length;	
   values = document.getElementsByClassName('count');
   current_value='';
  
   for(i=0;i<total;i++)
   {
	   
	   current_value+=values[i].innerHTML;
	   
   }
   new_value = parseInt(current_value)+2;
   
   new_value_string=new_value.toString();

   for(j=0;j<new_value_string.length;j++)
   {
	   values[j].innerHTML = new_value_string[j];
   }
  
}
#hp_header .number{
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-top: 40px;
}
#hp_header .number .number_inner{
    display: inline-block;
    text-align: center;
    color: #282828;
    font-family: SourceSansPro-Regular !important;
    font-size: 32px;
}
#hp_header .number .count{
    font-family: SourceSansPro-Regular !important;
    font-size: 32px;
    color: #f0f1b4;
    padding: 5px 10px;
    background-color: #282828;
    margin: 0px 5px;
}
#hp_header .number .members_count {
    width: 100%;
    float: left;
    margin-top: 10px;
    color: #282828;
    font-family: SourceSansPro-Regular !important;
    text-transform: uppercase;
    letter-spacing: 5px;
}
<div id="hp_header">
  <span class="number">
    <span class="number_inner">
      <span class="count">1</span>
      <span class="count">5</span>
      <span class="count">2</span>
      ,
      <span class="count">2</span>
      <span class="count">4</span>
      <span class="count">2</span>
    </span>
  </span>
</div>