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/
我已经提供了两种方法来实现我的建议：第一个栏在达到100后立即回到0，第二个栏有一个小延迟。

使用模运算符%将计数器重置为零为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) - 将计数器加1，模101：
模运算符计算除法后的余数，即： 0 % 101 = 0 ，100 % 101 = 100和 200 % 101 = 99 ，201 % 101 = 100，<强> 202 % 101 = 100

Answer 2

而不是setTimeout，请使用setInterval。

每次触发间隔时，使用一个函数计算填充条的数量。一旦达到100，重置它。

然后，您可以在用户点击后使用clearInterval清除间隔。

Answer 3

本文介绍如何无限重复CSS动画。这在CPU上比使用Javascript更容易：

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

Javascript：将类宽度从0％更改为100％，从100％更改为0％不停止

3 个答案: