Блог

Главная - Вопросы по программированию - Я хочу создать автоматический счетчик в JavaScript. У меня есть код, но я не могу остановить это на определенном номере, может ли кто-нибудь помочь мне в этом

Я хочу создать автоматический счетчик в JavaScript. У меня есть код, но я не могу остановить это на определенном номере, может ли кто-нибудь помочь мне в этом

#javascript #html

Вопрос:

Я пытался создать счетчик JavaScript для своего веб-сайта, и я не могу остановить этот счетчик при определенном количестве, ниже приведен прилагаемый код и выходное изображение. Пожалуйста, помогите мне с этим.

Вот код

 <body onload="incrementCount(0)">
<div class="main_container" id="id_main_container">
  <div class="container_inner" id="display_div_id">
  </div>
</div>
</body>

<script>
var counter_list = [0,0,0,0,0];
var str_counter_0 = counter_list[0];
var str_counter_1 = counter_list[1];
var str_counter_2 = counter_list[2];
var str_counter_3 = counter_list[3];
var str_counter_4 = counter_list[4];
var display_str = "";
var display_div = document.getElementById("display_div_id");

function incrementCount(current_count){
  setInterval(function(){
  // clear count
  while (display_div.hasChildNodes()) {
      display_div.removeChild(display_div.lastChild);
  }
  str_counter_0  ;
  if (str_counter_0 > 9) {
    str_counter_0 = 0; // reset count
    str_counter_1  ;    // increase next count
  }
  if(str_counter_1>9){
    str_counter_1 = 0;
    str_counter_2  ;
  }
  if(str_counter_2>9){
    str_counter_2 = 0;
    str_counter_3  ;
  }
  if(str_counter_3>9){
    str_counter_3 = 0;
    str_counter_4  ;
  }

  display_str = str_counter_4.toString()   'xa0 xa0  xa0  xa0  xa0  xa0'   str_counter_3.toString()   'xa0 xa0  xa0  xa0  xa0  xa0'   str_counter_2.toString()   'xa0 xa0  xa0  xa0  xa0  xa0'   str_counter_1.toString()   'xa0 xa0  xa0  xa0  xa0  xa0'   str_counter_0.toString();
  for (var  i = 0; i < display_str.length; i  ) {
    var new_span = document.createElement('span');
    new_span.className = 'num_tiles';
    new_span.innerText = display_str[i];
    display_div.appendChild(new_span);
   if(display_str[i] == 0   'xa0 xa0  xa0  xa0  xa0  xa0'   0   'xa0 xa0  xa0  xa0  xa0  xa0'   1   'xa0 xa0  xa0  xa0  xa0  xa0'   0   'xa0 xa0  xa0  xa0  xa0  xa0'   0 ){
        str_counter_0 = 0;
        str_counter_1 = 0;
        str_counter_2 = 0;
        str_counter_3 = 0;
        }
    }
},0200);


} 
</script>

Результат должен выглядеть следующим образом

введите описание изображения здесь

Комментарии:

1. Были бы вы открыты для других предложений о том, как подойти к этой проблеме с помощью JavaScript, или есть причина для такого конкретного подхода?

Ответ №1:

вы имеете в виду, что хотите остановить счетчик на определенном номере.как ниже, остановитесь на 50?

 <body onload="incrementCount(50)">
    <div class="main_container" id="id_main_container">
      <div class="container_inner" id="display_div_id">
      </div>
    </div>
</body>
    
<script>
var counter = 0;
var display_str = "";
var display_div = document.getElementById("display_div_id");

function incrementCount(stop_count){
    const interval = setInterval(function(){
        while (display_div.hasChildNodes()) {
            display_div.removeChild(display_div.lastChild);
        }
        counter  
        if(counter>=stop_count){
            clearInterval(interval)
        }
        const counter_str = String(counter).padStart(5,'0')
        
        display_str = counter_str[0]   'xa0 xa0  xa0  xa0  xa0  xa0'   counter_str[1]   'xa0 xa0  xa0  xa0  xa0  xa0'   counter_str[2]   'xa0 xa0  xa0  xa0  xa0  xa0'   counter_str[3]   'xa0 xa0  xa0  xa0  xa0  xa0'   counter_str[4];
        for (var  i = 0; i < display_str.length; i  ) {
            var new_span = document.createElement('span');
            new_span.className = 'num_tiles';
            new_span.innerText = display_str[i];
            display_div.appendChild(new_span);
            if(display_str[i] == 0   'xa0 xa0  xa0  xa0  xa0  xa0'   0   'xa0 xa0  xa0  xa0  xa0  xa0'   1   'xa0 xa0  xa0  xa0  xa0  xa0'   0   'xa0 xa0  xa0  xa0  xa0  xa0'   0 ){
                counter = 0
            }
        }
    },0200);

} 
</script>
Метки: , ,