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

2024-09-27 14:49:37

下面一段代码就是用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)

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

基于JavaScript实现随机颜色输入框

废话不多说了额,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table{width:500px;height:400px;} table td{width:100px;height:50px;} </style> <script> window.onl
一个js随机颜色脚本（用于标签页面，也可用于任何页面）

看见有人要这个东西,发上来.237个字节的东西.很小吧? 把下面代码添加到tag.asp的<div id="mainContent-bottomimg">前面即可. 这么简单的问题就别问什么问题了. 其实你也可以添加到header.asp或footer.asp中.不过这样你整个页面的全部span区域将全为随机颜色了. 演示 http://www.hljsh.com/tag.asp 效果是一样的.不过我的演示是用asp实现的.我发的是用JS实现的.效果一样. 复制代码代码如
JS实现随机颜色的3种方法与颜色格式的转化

前言相信大家都知道在前端的颜色表示方式有多种,一种是以3个或6个十六进制的数子表示,一种是RGB的数字形式,还有一种是直接以颜色的英文来表示.这三种都是不支持透明色的.所以还有RGBA的表式方式,在RGB的的基础上加入了Alpha透明,使网页可以展现更加复杂绚丽的效果. 随机颜色在平时的码农日常中,经常会用到求随机颜色的地方,下面是我总结的几种简单的实现随机颜色的方式: 十六进制格式(#000000-#FFFFFF) 第一种是比较简单的方法,这种方法是先随机生成ffffff以内16进制数,然
js获取随机颜色值的函数

收集一个函数:获取随机颜色值复制代码代码如下: function getRandomColor(){ return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); } 说明: 1.16777215为16进制的颜色ffffff转成10进制的数字 2.>>数字取整 3.转成16进制不足6位的以0来补充在线演示代码: js随机颜色 document
js随机颜色代码的多种实现方式

JS随机颜色有很多地方要用到:比如大家看到很多标签连接都是五颜六色.那就需要到这个了.下面开始: 方法思路总共有二.一是准备一组漂亮的候选颜色,二是随机生成颜色. 实现1 复制代码代码如下: var getRandomColor = function(){ return '#' + (function(color){ return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])
js实现九宫格的随机颜色跳转

效果如下: 图(1) 初始图图(2) 开始闪代码如下: <!DOCTYPE html> <html> <head> <title>九宫格</title> <style type="text/css"> div{ width:190px; height:190px; background:#FFA600; float:left; margin:10px; border-radius: 10px; } body
js生成随机颜色方法代码分享（三种）

话不多说,请看代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn1">调用第一种</button> <button id="bnt2&quo
JavaScript实现简单生成随机颜色的方法

本文实例讲述了JavaScript实现简单生成随机颜色的方法.分享给大家供大家参考,具体如下: 如果要做出如下效果,每次刷新网页则产生一种颜色其实非常简单,产生随机颜色的根本核心就是随机构造出一个六位数,JavaScript的随机数的问题而且这个六位数的每一个数位0~f之内,因此就有了如下的方法: 1.首先是一个HTML布局,p标签是是用来放当前颜色的,div的背景颜色就是这个颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&quo
基于javascript实现随机颜色变化效果

本文实例讲解了基于javascript实现随机颜色变化效果,分享给大家供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>随机颜色变化效果</title> <style type="text/css"> #thediv{
javascript生成随机颜色示例代码

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

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

相关推荐

随机推荐