js代碼實現隨機顏色的小方塊

2024-05-06 16:24:04

字體：大中小

來源：轉載

供稿：網友

這篇文章主要用js代碼實現顏色隨機的小方塊,需要的朋友可以參考下

下面一段代碼就是用js實現的隨機顏色的小方塊，不多說了代碼很簡單，直接上代碼了。

/**/js注釋已刪

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF- ">

<meta charset="utf- ">

<title>koringz</title>

<link rel="stylesheet" href="css/demo.css">

</head>

<body>

<div class="container">

<div class="main">

<div class="colorful"></div>

</div>

</div>

</body>

</html>

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

html {

font-size: px;

-webkit-tap-highlight-color: transparent;

}

body {

margin: ;

padding: ;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: px;

line-height: . ;

color: # ;

background-color: rgba( , , , . );

}

.container {

overflow: visible;

}

.main {

position: relative;

width: %;

height: px;

margin:auto;

}

.colorful {

overflow: visible;

width: %;

height: %;

}

.colorful > a {

float: left;

display: block;

width: px;

height: px;

zoom: ;

}

.colorful > a:hover {

-webkit-animation:infinite s ease-in-out start-roll;

-moz-animation:infinite s ease-in-out start-roll;

animation:infinite s ease-in-out start-roll;

}

@-webkit-keyframes start-roll{

% {

-webkit-transform: rotate( deg); /*chrome*/

-moz-transform: rotate( deg); /*火狐*/

-ms-transform: rotate( deg); /*IE*/

transform: rotate( deg);

-webkit-transition: opacity . s linear;

transition: opacity . s linear;

opacity: . ;

filter: alpha(opacity= );

zoom: ;

}

% {

-webkit-transform: rotate( deg); /*chrome*/

-moz-transform: rotate( deg); /*火狐*/

-ms-transform: rotate( deg); /*IE*/

transform: rotate( deg);

-webkit-transition: opacity s linear;

transition: opacity s linear;

opacity: ;

filter: alpha(opacity= );

zoom: ;

}

% {

-webkit-transform: rotate( deg); /*chrome*/

-moz-transform: rotate( deg); /*火狐*/

-ms-transform: rotate( deg); /*IE*/

transform: rotate( deg);

-webkit-transition: opacity . s linear;

transition: opacity . s linear;

opacity: . ;

filter: alpha(opacity= );

zoom: ;

}

}

@-moz-keyframes start-roll{

% {

-webkit-transform: rotate( deg); /*chrome*/

-moz-transform: rotate( deg); /*火狐*/

-ms-transform: rotate( deg); /*IE*/

transform: rotate( deg);

-webkit-transition: opacity . s linear;

transition: opacity . s linear;

opacity: . ;

filter: alpha(opacity= );

}

% {

-webkit-transform: rotate( deg); /*chrome*/

-moz-transform: rotate( deg); /*火狐*/

-ms-transform: rotate( deg); /*IE*/

transform: rotate( deg);

-webkit-transition: opacity s linear;

transition: opacity s linear;

opacity: . ;

filter: alpha(opacity= );

}

% {

-webkit-transform: rotate( deg); /*chrome*/

-moz-transform: rotate( deg); /*火狐*/

-ms-transform: rotate( deg); /*IE*/

transform: rotate( deg);

-webkit-transition: opacity . s linear;

transition: opacity . s linear;

opacity: . ;

filter: alpha(opacity= );

}

}

@keyframes start-roll{

% {

-webkit-transform: rotate( deg); /*chrome*/

-moz-transform: rotate( deg); /*火狐*/

-ms-transform: rotate( deg); /*IE*/

transform: rotate( deg);

-webkit-transition: opacity . s linear;

transition: opacity . s linear;

opacity: . ;

filter: alpha(opacity= );

}

% {

-webkit-transform: rotate( deg); /*chrome*/

-moz-transform: rotate( deg); /*火狐*/

-ms-transform: rotate( deg); /*IE*/

transform: rotate( deg);

-webkit-transition: opacity s linear;

transition: opacity s linear;

opacity: . ;

filter: alpha(opacity= );

}

% {

-webkit-transform: rotate( deg); /*chrome*/

-moz-transform: rotate( deg); /*火狐*/

-ms-transform: rotate( deg); /*IE*/

transform: rotate( deg);

-webkit-transition: opacity . s linear;

transition: opacity . s linear;

opacity: . ;

filter: alpha(opacity= );

}

}

(function (window) {

var document = window.document;

function on(elem, evtnm, eventhd) {

var onevtnm = 'on' + evtnm;

elem[onevtnm] = eventhd;

}

function grc() {

var val = [], i = ;

while (++i <= ) {

val.push(Math.floor(Math.random() * ));

}

return 'rgb(' + val.join() + ')';

}

function fbc() {

var el = document.querySelectorAll('.colorful')[ ],

total = Math.floor(el.offsetWidth / ) * Math.floor(el.offsetHeight / ),

df = document.createDocumentFragment(),

a;

while (total-- > ) {

a = document.createElement('a');

a.style.backgroundColor = grc();

df.appendChild(a);

}

el.appendChild(df);

}

on(window, 'load', function () {

fbc();

});

})(window)