recherche

Maison  >  Article  >  interface Web  >  code js pour implémenter des petits carrés avec des couleurs aléatoires_Connaissances de base

code js pour implémenter des petits carrés avec des couleurs aléatoires_Connaissances de base

WBOY
WBOYoriginal
2016-05-16 15:48:151488parcourir

Le morceau de code suivant est un petit carré de couleur aléatoire implémenté en js. Je n'entrerai pas dans les détails. Le code est très simple. Passons directement au code. 

/**/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)

Le code ci-dessus consiste à utiliser js pour implémenter de petits carrés de couleurs aléatoires. Les amis dans le besoin peuvent s'y référer.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Une brève discussion sur l'utilisation du générateur et de l'itérateur dans les connaissances JavaScript_BasicArticle suivant：Une brève discussion sur l'utilisation du générateur et de l'itérateur dans les connaissances JavaScript_Basic

Articles Liés

Voir plus