使用JavaScript动画HTML5进度条

我正在尝试做一个简单的HTML5进度条。当用户点击一个按钮时，我希望它（onclick）开始动画，以便它在三秒钟内从0-100（完整）开始。它应该是一些非常基本的Javascript，我期望把它扔在我的文档头上。使用JavaScript动画HTML5进度条

非常类似： HTML5 progress bar animation

我只需要它的onclick代替的onload和一个按钮。这只是一个标准的HTML进度条，所以它看起来是这样的：

<progress id="progress" value="0" min="0" max="100">0%</progress> 
<input type="button" value="button" onclick="[make_progress_bar_go_from_0_to_100]">

来源

2012-08-17 Lindsay Roberts

所有你需要的是从您发布的问题，这个例子： http://jsfiddle.net/526hM/

，它重视在onload的部分是这样的：

$(document).ready(function(){ 
    ... 
    setTimeout(animator, updatesPerSecond); 
}

您只需将此animator函数附加到按钮上即可。要在3秒内发生效果，请更新时序变量。

HTML：

<progress max="200" value="0"></progress> 
<button id="theButton">Start!</button>

脚本：

$(document).ready(function(){ 
    var msecsPerUpdate = 1000/60; // # of milliseconds between updates, this gives 60fps 
    var progress = $('progress'); 
    var duration = 3;    // secs to animate for 
    var interval = progress.attr('max')/(duration*1000/msecsPerUpdate); 

    var animator = function(){ 
      progress.val(progress.val() + interval); 
      if (progress.val() + interval < progress.attr('max')){ 
       setTimeout(animator, msecsPerUpdate); 
      } else { 
       progress.val(progress.attr('max')); 
      } 
     } 

    $('#theButton').click(function(e) { 
     e.preventDefault(); 
     animator(); 
    }); 
});

演示：http://jsfiddle.net/526hM/28/

来源

2012-08-17 02:18:54

我不能得到这个工作，我不知道为什么。 jsfiddle中的代码直接插入嵌套在脚本标记中的文档头部，但它仍然刷新我的页面并且什么都不做。 http://lrroberts0122.github.com/WDF/html5_form.html是一个包含我所有代码的页面，包括插入的js。感谢您的帮助。 – 2012-08-17 02:37:41

你的页面上有jQuery吗？如果您的网页也可公开访问，则可以发布您的网页。 – 2012-08-17 02:38:27

你需要在你的页面中包含jQuery，它是一个库，使得它更容易在JavaScript中进行编码。您只需在**上述脚本之前在您的头**中加入另一个脚本标记： '' – 2012-08-17 02:42:50

使用JavaScript动画HTML5进度条

回答

相关问题