Simple loading of random color squares using javascript,
Load small blocks with fragments to implement simple random color blocks and directly add the Code:
:
Code:
<!DOCTYPE html>
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.
Articles you may be interested in:
- SetTimeout JS final loading
- Jquery. LazyLoad. js Revised Version Download to implement image delayed loading plug-in
- Jquery getScript dynamic loading JS method improvement details
- JS achieves image pre-loading without waiting
- Three solutions for js asynchronous loading
- How to execute js after page loading is complete
- After the page is loaded, execute the jquery Writing Method of JS and the difference
- How to Use jQuery to dynamically load js script files
- Two methods are used to run a js after loading the HTML page.
- Automatically execute the js Code of a method after the page is loaded.