Javascript: simple loading of random color squares _ javascript skills

This article mainly introduces the javascript Implementation of simple loading of random color blocks, interested friends can refer to the loading of small blocks with fragments to achieve simple random color blocks, directly on the Code:
:

Code:

 
  
  koringz 
  
  
   
  
 

Css code:

* {-Webkit-box-sizing: border-box;-moz-box-sizing: border-box;} html {font-size: 10px;-webkit-tap-highlight-color: transparent;} body {margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: rgba (211,232,132, 0.8 );}. container {overflow: visible ;}. main {position: relative; width: 90%; height: 200px; margin: auto ;}. colorful {overflow: visible; width: 100%; height: 100% ;}. colorful> a {float: left; display: block; width: 50px; height: 50px; zoom: 2 ;}. colorful> a: hover {-webkit-animation: infinite 2 s release-in-out start-roll;-moz-animation: infinite 2 s release-in-out start-roll; animation: infinite 2 s release-in-out start-roll;} @-webkit-keyframes start-roll {0% {-webkit-transform: rotate (0deg ); /* chrome */-moz-transform: rotate (0deg);/* Firefox */-ms-transform: rotate (0deg);/* IE */transform: rotate (0deg);-webkit-transition: opacity. 3 s linear; transition: opacity. 3 s linear; opacity :. 5; filter: alpha (opacity = 50); zoom: 1;} 50% {-webkit-transform: rotate (180deg);/* chrome */-moz-transform: rotate (180deg);/* Firefox */-ms-transform: rotate (180deg);/* IE */transform: rotate (180deg);-webkit-transition: opacity 1 s linear; transition: opacity 1 s linear; opacity: 1; filter: alpha (opacity = 100); zoom: 2;} 100% {-webkit-transform: rotate (360deg);/* chrome */-moz-transform: rotate (360deg);/* Firefox */-ms-transform: rotate (360deg ); /* IE */transform: rotate (360deg);-webkit-transition: opacity. 3 s linear; transition: opacity. 3 s linear; opacity :. 5; filter: alpha (opacity = 50); zoom: 1 ;}@- moz-keyframes start-roll {0% {-webkit-transform: rotate (0deg ); /* chrome */-moz-transform: rotate (0deg);/* Firefox */-ms-transform: rotate (0deg);/* IE */transform: rotate (0deg);-webkit-transition: opacity. 3 s linear; transition: opacity. 3 s linear; opacity :. 5; filter: alpha (opacity = 50) ;}50% {-webkit-transform: rotate (180deg);/* chrome */-moz-transform: rotate (180deg ); /* Firefox */-ms-transform: rotate (180deg);/* IE */transform: rotate (180deg);-webkit-transition: opacity 1 s linear; transition: opacity 1 s linear; opacity :. 5; filter: alpha (opacity = 50) ;}100% {-webkit-transform: rotate (360deg);/* chrome */-moz-transform: rotate (360deg ); /* Firefox */-ms-transform: rotate (360deg);/* IE */transform: rotate (360deg);-webkit-transition: opacity. 3 s linear; transition: opacity. 3 s linear; opacity :. 5; filter: alpha (opacity = 50) ;}@ keyframes start-roll {0% {-webkit-transform: rotate (0deg ); /* chrome */-moz-transform: rotate (0deg);/* Firefox */-ms-transform: rotate (0deg);/* IE */transform: rotate (0deg);-webkit-transition: opacity. 3 s linear; transition: opacity. 3 s linear; opacity :. 5; filter: alpha (opacity = 50) ;}50% {-webkit-transform: rotate (180deg);/* chrome */-moz-transform: rotate (180deg ); /* Firefox */-ms-transform: rotate (180deg);/* IE */transform: rotate (180deg);-webkit-transition: opacity 1 s linear; transition: opacity 1 s linear; opacity :. 5; filter: alpha (opacity = 50) ;}100% {-webkit-transform: rotate (360deg);/* chrome */-moz-transform: rotate (360deg ); /* Firefox */-ms-transform: rotate (360deg);/* IE */transform: rotate (360deg);-webkit-transition: opacity. 3 s linear; transition: opacity. 3 s linear; opacity :. 5; filter: alpha (opacity = 50 );}}

Js Code:

(function (window) { var document = window.document; function on(elem, evtnm, eventhd) {  var onevtnm = 'on' + evtnm;  elem[onevtnm] = eventhd; } function grc() {  var val = [], i = 0;  while (++i <= 3) {   val.push(Math.floor(Math.random() * 255));  }  return 'rgb(' + val.join() + ')'; } function fbc() {  var el = document.querySelectorAll('.colorful')[0],   total = Math.floor(el.offsetWidth / 50) * Math.floor(el.offsetHeight / 50),   df = document.createDocumentFragment(),   a;  while (total-- > 0) {   a = document.createElement('a');   a.style.backgroundColor = grc();   df.appendChild(a);  }  el.appendChild(df); } on(window, 'load', function () {  fbc(); });})(window)

I hope this article will help you learn about javascript programming.