03.
<head>
04.
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
05.
<title>Untitled Document</title>
06.
07.
<script src=
"jquery.js"
></script>
08.
<script>
09.
10.
keep_width = 1;
11.
12.
function
stop_preload(){
13.
14.
$(
'div.c1'
).css(
'background-color'
,
'green'
);
15.
$(
'div.c1'
).css(
'width'
,
'100px'
);
16.
$(
'span.c1'
).text(
"100 %"
);
17.
clearInterval(t);
18.
}
19.
20.
function
play_preload(){
21.
22.
$(
'div.c1'
).css(
'width'
,keep_width+
'px'
);
23.
24.
$(
'span.c1'
).text(keep_width+
" %"
);
25.
$(
'span.c2'
).text(keep_width+
" %"
);
26.
27.
if
(keep_width > 60){
28.
$(
'div.c1'
).css(
'background-color'
,
'green'
);
29.
}
30.
else
31.
if
(keep_width > 40){
32.
$(
'div.c1'
).css(
'background-color'
,
'orange'
);
33.
}
34.
35.
36.
if
(keep_width == 100){
37.
stop_preload();
38.
}
39.
else
{
40.
41.
keep_width = keep_width+1;
42.
43.
}
44.
45.
}
46.
47.
window.onload = stop_preload ;
48.
49.
50.
</script>
51.
52.
</head>
53.
54.
<body>
55.
56.
<div
class
=
"c1"
style=
"background-color:#FF0000;width:0px; height:20px"
></div>
57.
<br/>
58.
โหลดเสร็จสมบูรณ์ <span
class
=
"c1"
></span>
59.
<br/>
60.
ใช้เวลาในการในการโหลด <span
class
=
"c2"
></span> ถึงเสร็จสิ้น
61.
<br/><br/>
62.
<script>
63.
t = setInterval(
'play_preload()'
,50) ;
64.
</script>
65.
66.
<span style=
"color:#FF0000"
> หมายเหตุ จะเห็นความเปลี่ยนแปลง ต้องมีข้อมูลที่เยอะหรือใช้เวลาในการโหลดนาน</span><br/><br/>
69.
70.
71.
</body>
72.
73.
74.
</html>