Question

我试图在10秒内尝试使用javascript将width的{{1}}从100％降低到1％，但我是学习者的一员使用javascript和jquery所以我有一点问题。

我的代码：

HTML

<div>

的JavaScript

<div class="timer"></div>

但是它还没有用。我自己从不同的地方拼凑起来，所以这可能是完全错误的。任何人都可以帮助我吗？

Answer 1

jQuery不会以百分比形式返回宽度，因此您必须手动

var width = 100;
function shrinkMyDiv(){
    width--;
    if(width > 0){
        $(".timer").css('width', width + '%');
    } else {
        clearInterval(intervalTimer);
    }
}

// Start an interval timer which runs every 10 milliseconds (1 hundredth of a second)
var intervalTimer = setInterval(shrinkMyDiv(), 10);

Answer 2

如果将宽度设置为内联样式...

<div class="timer" style="width:100%"></div>

然后在你的javascript中：

var shrinkit = setInterval(function()
               {
                   //you can access the width as a percentage pretty easily:
                   var width = parseInt($('.timer')[0].style.width)-1;
                   $(".timer").width(width + '%');
               }, 100);
setTimeout(function() { clearInterval(shrinkit); }, 10100);

而我只是在10秒后清除间隔而不是计算，在这种情况下对我来说似乎更直观。

查看实际操作：http://jsfiddle.net/4SeP9/

使用jquery每隔100秒减少div的宽度1％

2 个答案: