如何使用 jQuery 创建动画加载栏？ [复制]答案

【问题标题】：How can I create an animated loading bar using jQuery? [duplicate]如何使用 jQuery 创建动画加载栏？ [复制]
【发布时间】：2012-05-22 15:10:22
【问题描述】：

可能重复：
Jquery:: Ajax powered progress bar?

我需要创建某种倒计时

请在 Html 中使用

count = Math.floor((futureDate-today)/1000);

if(count > 0) //move Loading bar by percent

我怎样才能拥有与电池动画相同的代码加载栏？

Like this demo 这是我用来递减计数器的demo code：

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您还需要一个开始日期才能获得电池百分比。检查这个小提琴： http://jsfiddle.net/uhGjz/

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>MyBattery</title>
  <style type='text/css'>
#bat {
    width:100px;
    height: 30px;
    border: 1px solid;
    position: relative;
}
#fill {
    height: 100%;
    background-color: red;
    width: 0%;
}
  </style>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
  <script type='text/javascript'>
$(function(){
var now = new Date();
var today = now.getTime();
var pastDate = Date.parse("Tue, 1 Jan 2012 00:00:00 GMT");
var futureDate = Date.parse("Tue, 1 Aug 2012 00:00:00 GMT");
var count = Math.floor((today-pastDate)/(futureDate-pastDate)*100);

if(count > 0) { //move Loading bar by percent 
    $('#fill').animate({
       width: count+"%"
    }, 1000);
}

}); 
</script>
</head>
<body>
  <div id="bat"><div id="fill"></div></div>
  <!-- Your own content! -->
</body>
</html>

【讨论】：

我的朋友可以使用 html5 我希望在 html 中使用相同的代码
上面贴的代码是JavaScript。正如您在jsfiddle 中看到的，您需要添加以下HTML：<div id="bat"><div id="fill"></div></div> 祝您好运！顺便说一句，如果您希望在此板上得到好的答案，您需要投票或接受...
对不起，我接受你的分析，感谢你对我的分析
谁可以在我的页面中包含此代码？？？只是我将这段代码和 cod（css 和 javascipt 以及这个 div='bat' ）复制到页面 html 或 deffrent 方式？？
查看编辑...但也许您应该查看这个地方以了解有关如何创建网站的一些基本知识；-) 再次祝您好运！ w3schools.com