Javascript: чтобы изменить ширину класса от 0% до 100% и от 100% до 0% без остановки

Question

Приведенный ниже код изменяет ширину «внутреннего» класса с 0% до 100%, поэтому полоса постепенно заполняется зеленым цветом.Но это неполно, потому что, когда ширина равна 100%, мне нужно вернуться к 0%, а затем к 100% и т. Д. Он перестанет переходить от 0% до 100% и от 100% до 0% при нажатии,

Я выясню, как добавить четное нажатие, но, пожалуйста, помогите мне добиться безостановочного изменения ширины.

Спасибо за тонну!

<style>


.bar {
  background-color: #191919;
  border-radius: 16px;
  padding: 4px;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 24px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  -webkit-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
  -moz-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
  box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
}


.bar .inner {
  background: #999;
  display: block;
  position: absolute;
  overflow: hidden;
  max-width: 97.5% !important; 
  height: 24px;
  text-indent: -9999px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 3px rgba(0, 0, 0, 0.4),
    0 1px 1px #000;
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 3px rgba(0, 0, 0, 0.4),
    0 1px 1px #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 
   inset 0 -1px 3px rgba(0, 0, 0, 0.4), 
   0 1px 1px #000;
  -webkit-transition: width 0.3s linear;
  -moz-transition: width 0.3s linear;
  transition: width 0.3s linear;
}


.green .inner { 
  background: #7EBD01;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7EBD01), to(#568201));
  background: -moz-linear-gradient(top, #7EBD01, #568201);
}
</style>


<script type="text/javascript">

    for (i=0;i<=100;i++){


         setTimeout(function(){
            document.querySelector('.green.bar .inner').style.width = i+'%';
        },0);

        }

</script>


<div class="green bar">
 <div class="inner" style="width:0%"></div>
</div>

Answer 1

Скрипка : http://jsfiddle.net/ZeYJy/
Я предложил два способа реализации моего предложения: первый бар сразу возвращается к 0 после достижения 100, второй бар имеет небольшую задержку.

<ч />

Используйте оператор по модулю %, чтобы сбросить счетчик на ноль на 100. См. Ниже:

<script>
window.onload = function(){
    var counter = 0;
    window.setInterval(function(){
        document.querySelector('.green.bar .inner').style.width =
                                                    (++counter % 101) + '%';
    }, 50);
}
</script>

Этот скрипт добавляет интервал при загрузке, который увеличивает ширину элемента. После того, как счетчик достигнет 100, ширина будет обнулена.

Пояснение к коду:

• var counter = 0 (внутри функции, window.onload) - Локальная переменная определена и инициализируется нулем.
• window.setInterval(function(){ ... }, 50) - Определяется интервал, активирующий функцию (первый аргумент) каждые 50 миллисекунды (20x в секунду, настраивается по вашему желанию)
• (++counter % 101) - Увеличивает счетчик на единицу по модулю 101:
  Оператор по модулю вычисляет остаток после деления, то есть: 0 % 101 = 0, 100 % 101 = 100 и 200 % 101 = 99, 201 % 101 = 100, 202 % 101 = 100

Answer 2

В этой статье показано, как бесконечно повторять CSS-анимацию.Это будет проще на вашем процессоре, чем с использованием Javascript:

http://developer.apple.com/library/safari/#codinghowtos/Mobile/GraphicsMediaAndVisualEffects/_index.html

Answer 3

Вместо setTimeout используйте setInterval.

Каждый раз, когда срабатывает интервал, используйте функцию, чтобы определить, сколько нужно заполнить бар.Как только он достигнет 100, сбросьте его.

Вы можете очистить интервал, используя clearInterval после нажатия пользователем.