html5 兑现加载loading.实例
日期：2014-05-17 浏览次数：20827 次
html5 实现加载loading.......实例
1. <!DOCTYPE html>
2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
5. <title>HTML5 Demo: canvas</title>
6. <style>
7. body {
8. font: normal 16px/20px Helvetica, sans-serif;
9. background: rgb(237, 237, 236);
10. margin: 0;
11. margin-top: 40px;
12. padding: 0;
13. }
14.
15. article, section, header, footer {
16. display: block;
17. }
18.
19. #wrapper {
20. width: 600px;
21. margin: 0 auto;
22. background: #fff url(images/shade.jpg) repeat-x center bottom;
23. -moz-border-radius: 10px;
24. -webkit-border-radius: 10px;
25. border-top: 1px solid #fff;
26. padding-bottom: 76px;
27. }
28.
29. h1 {
30. padding-top: 10px;
31. }
32.
33. h2 {
34. font-size: 100%;
35. font-style: italic;
36. }
37.
38. header,
39. article > *,
40. footer a,
41. footer p {
42. margin: 20px;
43. }
44.
45. footer > * {
46. margin: 20px;
47. color: #999;
48. }
49.
50. article {
51. position: relative;
52. }
53. </style>
54. <script>
55. // For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
56. (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})()
57. </script>
58. </head>
59. <body>
60. <section id="wrapper">
61. <header>
62. <h1>Canvas</h1>
63.
64. </header>
65. <article></article>
66. <footer><a href="/">HTML5 demo</a></footer>
67. </section>
68. <script src="h5utils.js"></script>
69. <script>
70.
71. buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
72.
73. function buildSpinner(data) {
74.
75. var canvas = document.createElement('canvas');
76. canvas.height = 100;
77. canvas.width = 300;
78. document.getElementsByTagName('article')[0].appendChild(canvas);
79. var ctx = canvas.getContext("2d"),
80. i = 0, degrees = data.degrees, loops = 0, degreesList = [];
81.
82. for (i = 0; i < degrees; i++) {
83. degreesList.push(i);
84. }
85.
86. // reset
87. i = 0;
88.
89. // so I can kill it later
90. window.canvasTimer = setInterval(draw, 1000/degrees);
91.
92. function reset() {
93. ctx.clearRect(0,0,100,100); // clear canvas
94.
95. var left = degreesList.slice(0, 1);&nbs
1. <!DOCTYPE html>
2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
5. <title>HTML5 Demo: canvas</title>
6. <style>
7. body {
8. font: normal 16px/20px Helvetica, sans-serif;
9. background: rgb(237, 237, 236);
10. margin: 0;
11. margin-top: 40px;
12. padding: 0;
13. }
14.
15. article, section, header, footer {
16. display: block;
17. }
18.
19. #wrapper {
20. width: 600px;
21. margin: 0 auto;
22. background: #fff url(images/shade.jpg) repeat-x center bottom;
23. -moz-border-radius: 10px;
24. -webkit-border-radius: 10px;
25. border-top: 1px solid #fff;
26. padding-bottom: 76px;
27. }
28.
29. h1 {
30. padding-top: 10px;
31. }
32.
33. h2 {
34. font-size: 100%;
35. font-style: italic;
36. }
37.
38. header,
39. article > *,
40. footer a,
41. footer p {
42. margin: 20px;
43. }
44.
45. footer > * {
46. margin: 20px;
47. color: #999;
48. }
49.
50. article {
51. position: relative;
52. }
53. </style>
54. <script>
55. // For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
56. (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})()
57. </script>
58. </head>
59. <body>
60. <section id="wrapper">
61. <header>
62. <h1>Canvas</h1>
63.
64. </header>
65. <article></article>
66. <footer><a href="/">HTML5 demo</a></footer>
67. </section>
68. <script src="h5utils.js"></script>
69. <script>
70.
71. buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
72.
73. function buildSpinner(data) {
74.
75. var canvas = document.createElement('canvas');
76. canvas.height = 100;
77. canvas.width = 300;
78. document.getElementsByTagName('article')[0].appendChild(canvas);
79. var ctx = canvas.getContext("2d"),
80. i = 0, degrees = data.degrees, loops = 0, degreesList = [];
81.
82. for (i = 0; i < degrees; i++) {
83. degreesList.push(i);
84. }
85.
86. // reset
87. i = 0;
88.
89. // so I can kill it later
90. window.canvasTimer = setInterval(draw, 1000/degrees);
91.
92. function reset() {
93. ctx.clearRect(0,0,100,100); // clear canvas
94.
95. var left = degreesList.slice(0, 1);&nbs
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
