js代码实现随机颜色的小方块

这篇文章主要用js代码实现颜色随机的小方块,需要的朋友可以参考下

下面一段代码就是用js实现的随机颜色的小方块，不多说了代码很简单，直接上代码了。

1. /**/js注释已删 
2. <!DOCTYPE html> 
3. <html> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=UTF- "> 
6. <meta charset="utf- "> 
7. <title>koringz</title> 
8. <link rel="stylesheet" href="css/demo.css"> 
9. </head> 
10. <body> 
11. <div class="container"> 
12. <div class="main"> 
13. <div class="colorful"></div> 
14. </div> 
15. </div> 
16. </body> 
17. </html> 
18. * { 
19. -webkit-box-sizing: border-box; 
20. -moz-box-sizing: border-box; 
21. box-sizing: border-box; 
22. } 
23. html { 
24. font-size: px; 
25. -webkit-tap-highlight-color: transparent; 
26. } 
27. body { 
28. margin: ; 
29. padding: ; 
30. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
31. font-size: px; 
32. line-height: . ; 
33. color: # ; 
34. background-color: rgba( , , , . ); 
35. } 
36. .container { 
37. overflow: visible; 
38. } 
39. .main { 
40. position: relative; 
41. width: %; 
42. height: px; 
43. margin:auto; 
44. } 
45. .colorful { 
46. overflow: visible; 
47. width: %; 
48. height: %; 
49. } 
50. .colorful > a { 
51. float: left; 
52. display: block; 
53. width: px; 
54. height: px; 
55. zoom: ; 
56. } 
57. .colorful > a:hover { 
58. -webkit-animation:infinite s ease-in-out start-roll; 
59. -moz-animation:infinite s ease-in-out start-roll; 
60. animation:infinite s ease-in-out start-roll; 
61. } 
62. @-webkit-keyframes start-roll{ 
63. % { 
64. -webkit-transform: rotate( deg); /*chrome*/ 
65. -moz-transform: rotate( deg); /*火狐*/ 
66. -ms-transform: rotate( deg); /*IE*/ 
67. transform: rotate( deg); 
68. -webkit-transition: opacity . s linear; 
69. transition: opacity . s linear; 
70. opacity: . ; 
71. filter: alpha(opacity= ); 
72. zoom: ; 
73. } 
74. % { 
75. -webkit-transform: rotate( deg); /*chrome*/ 
76. -moz-transform: rotate( deg); /*火狐*/ 
77. -ms-transform: rotate( deg); /*IE*/ 
78. transform: rotate( deg); 
79. -webkit-transition: opacity s linear; 
80. transition: opacity s linear; 
81. opacity: ; 
82. filter: alpha(opacity= ); 
83. zoom: ; 
84. } 
85. % { 
86. -webkit-transform: rotate( deg); /*chrome*/ 
87. -moz-transform: rotate( deg); /*火狐*/ 
88. -ms-transform: rotate( deg); /*IE*/ 
89. transform: rotate( deg); 
90. -webkit-transition: opacity . s linear; 
91. transition: opacity . s linear; 
92. opacity: . ; 
93. filter: alpha(opacity= ); 
94. zoom: ; 
95. } 
96. } 
97. @-moz-keyframes start-roll{ 
98. % { 
99. -webkit-transform: rotate( deg); /*chrome*/ 
100. -moz-transform: rotate( deg); /*火狐*/ 
101. -ms-transform: rotate( deg); /*IE*/ 
102. transform: rotate( deg); 
103. -webkit-transition: opacity . s linear; 
104. transition: opacity . s linear; 
105. opacity: . ; 
106. filter: alpha(opacity= ); 
107. } 
108. % { 
109. -webkit-transform: rotate( deg); /*chrome*/ 
110. -moz-transform: rotate( deg); /*火狐*/ 
111. -ms-transform: rotate( deg); /*IE*/ 
112. transform: rotate( deg); 
113. -webkit-transition: opacity s linear; 
114. transition: opacity s linear; 
115. opacity: . ; 
116. filter: alpha(opacity= ); 
117. } 
118. % { 
119. -webkit-transform: rotate( deg); /*chrome*/ 
120. -moz-transform: rotate( deg); /*火狐*/ 
121. -ms-transform: rotate( deg); /*IE*/ 
122. transform: rotate( deg); 
123. -webkit-transition: opacity . s linear; 
124. transition: opacity . s linear; 
125. opacity: . ; 
126. filter: alpha(opacity= ); 
127. } 
128. } 
129. @keyframes start-roll{ 
130. % { 
131. -webkit-transform: rotate( deg); /*chrome*/ 
132. -moz-transform: rotate( deg); /*火狐*/ 
133. -ms-transform: rotate( deg); /*IE*/ 
134. transform: rotate( deg); 
135. -webkit-transition: opacity . s linear; 
136. transition: opacity . s linear; 
137. opacity: . ; 
138. filter: alpha(opacity= ); 
139. } 
140. % { 
141. -webkit-transform: rotate( deg); /*chrome*/ 
142. -moz-transform: rotate( deg); /*火狐*/ 
143. -ms-transform: rotate( deg); /*IE*/ 
144. transform: rotate( deg); 
145. -webkit-transition: opacity s linear; 
146. transition: opacity s linear; 
147. opacity: . ; 
148. filter: alpha(opacity= ); 
149. } 
150. % { 
151. -webkit-transform: rotate( deg); /*chrome*/ 
152. -moz-transform: rotate( deg); /*火狐*/ 
153. -ms-transform: rotate( deg); /*IE*/ 
154. transform: rotate( deg); 
155. -webkit-transition: opacity . s linear; 
156. transition: opacity . s linear; 
157. opacity: . ; 
158. filter: alpha(opacity= ); 
159. } 
160. } 
161. (function (window) { 
162. var document = window.document; 
163. function on(elem, evtnm, eventhd) { 
164. var onevtnm = 'on' + evtnm; 
165. elem[onevtnm] = eventhd; 
166. } 
167. function grc() { 
168. var val = [], i = ; 
169. while (++i <= ) { 
170. val.push(Math.floor(Math.random() * )); 
171. } 
172. return 'rgb(' + val.join() + ')'; 
173. } 
174. function fbc() { 
175. var el = document.querySelectorAll('.colorful')[ ], 
176. total = Math.floor(el.offsetWidth / ) * Math.floor(el.offsetHeight / ), 
177. df = document.createDocumentFragment(), 
178. a; 
179. while (total-- > ) { 
180. a = document.createElement('a'); 
181. a.style.backgroundColor = grc(); 
182. df.appendChild(a); 
183. } 
184. el.appendChild(df); 
185. } 
186. on(window, 'load', function () { 
187. fbc(); 
188. }); 
189. })(window) 

以上代码就是用js实现随机颜色小方块的全部内容，需要的朋友可以来参考下。