效果实现：
1.加载到一定程度，有颜色
2.加载颜色，有渐进增长的效果
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin:0px; padding:0px; } .load{ 300px; height:50px; border-radius:8px; -mos-border-radius:8px; -webkit-border-radius:8px; border:1px solid #eee; margin:50px auto; /*为了效果 */ overflow:hidden; } .loadInner{ 20%; height:50px; background:red; } </style> <script src="jquery-1.11.3.min.js"></script> </head> <body> <div class="load"> <div class="loadInner"></div> </div> <script> $(function(){ var i=0; setInterval(function(){ if(i<100) { i+=1; } $(".loadInner").css({"width":i+"%"}) },1000/24); }) </script> </body> </html>
延伸：
一.父级有圆角，子集没有圆角，有两种办法，
1.可以在子集上加上圆角，比较麻烦。
2.可以在父级上加overflow:hidden，超出隐藏，推荐。
二. setInterval()
setInterval方法是每隔一段时间执行一次，是循环执行的
计时器setInterval()
在执行时,从载入页面后每隔指定的时间执行代码。
语法:
setInterval(代码,交互时间);
参数说明：
1. 代码：要调用的函数或要执行的代码串。
2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。
返回值:
一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。
调用函数格式(假设有一个clock()函数):
setInterval("clock()",1000)
或
setInterval(clock,1000)
我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>计时器</title> <script type="text/javascript"> var int=setInterval(clock, 100) function clock(){ var time=new Date(); document.getElementById("clock").value = time; } </script> </head> <body> <form> <input type="text" id="clock" size="50" /> </form> </body> </html>
任务
获取时间，格式"时:分:秒"，并赋值给attime。
，使用setInterval()计时器来显示动态时间。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>定时器</title> <script type="text/javascript"> var attime; var int=setInterval("clock()",100) function clock(){ var time=new Date(); attime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds(); document.getElementById("clock").value = attime; } </script> </head> <body> <form> <input type="text" id="clock" size="50" /> </form> </body> </html>
结果：13：58：32
三. time.getHours()(参考w3c)
定义和用法
getHours() 方法可返回时间的小时字段。
语法
dateObject.getHours()
返回值
dateObject 的小时字段，以本地时间显示。返回值是 0 （午夜） 到 23 （晚上 11 点）之间的一个整数。
提示和注释：
注释：由 getHours() 返回的值是一个两位的数字。不过返回值不总是两位的，如果该值小于 10，则仅返回一位数字。
注释：该方法总是结合一个 Date 对象来使用。
实例
例子 1
在本例中，我们可取得当前时间的小时：
<script type="text/javascript"> var d = new Date() document.write(d.getHours()) </script>
输出：
14
例子 2
在本例中，我们将从具体的日期和时间中提取出小时字段：
<script type="text/javascript"> var born = new Date("July 21, 1983 01:15:00") document.write(born.getHours()) </script>
输出：
1
TIY
如何使用 getHours(), getMinutes() 以及 getSeconds() 来显示当前的时间。
<html> <body> <script type="text/javascript"> var d = new Date() document.write(d.getHours()) document.write(".") document.write(d.getMinutes()) document.write(".") document.write(d.getSeconds()) </script> </body> </html>
结果：14.22.31
如何使用 getHours(), getMinutes() 以及 getSeconds() 来显示当前的时间。
<html> <body> <script type="text/javascript"> function checkTime(i) { if (i<10) {i="0" + i} return i } var d = new Date() document.write(checkTime(d.getHours())) document.write(".") document.write(checkTime(d.getMinutes())) document.write(".") document.write(checkTime(d.getSeconds())) </script> </body> </html>
结果：14.24.01
JavaScript getMinutes() 方法(参考w3c)
定义和用法
getMinutes() 方法可返回时间的分钟字段。
语法
dateObject.getMinutes()
返回值
dateObject 的分钟字段，以本地时间显示。返回值是 0 ~ 59 之间的一个整数。
提示和注释：
注释：由 getMinutes() 返回的值是一个两位的数字。不过返回值不总是两位的，如果该值小于 10，则仅返回一位数字。
注释：该方法总是结合一个 Date 对象来使用。
实例
例子 1
在本例中，我们可取得当前时间的分钟：
<script type="text/javascript"> var d = new Date() document.write(d.getMinutes()) </script>
输出：24
例子 2
在本例中，我们将从具体的日期和时间中提取出分钟字段：
<script type="text/javascript"> var born = new Date("July 21, 1983 01:15:00") document.write(born.getMinutes()) </script>
输出：15
JavaScript getSeconds() 方法(参考w3c)
定义和用法
getSeconds() 方法可返回时间的秒。
语法
dateObject.getSeconds()
返回值
dateObject 的分钟字段，以本地时间显示。返回值是 0 ~ 59 之间的一个整数。
提示和注释：
注释：由 getSeconds() 返回的值是一个两位的数字。不过返回值不总是两位的，如果该值小于 10，则仅返回一位数字。
注释：该方法总是结合一个 Date 对象来使用。
实例
例子 1
在本例中，我们可取得当前时间的秒：
<script type="text/javascript"> var d = new Date() document.write(d.getSeconds()) </script>
输出：17
例子 2
在本例中，我们将从具体的日期和时间中提取出秒字段：
<script type="text/javascript"> var Birthday = new Date("July 21, 1983 01:15:00") document.write(Birthday.getSeconds()) </script>
输出：0