编程 Javascript

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

Posted in Javascript onJuly 30, 2015

下面一段代码就是用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实现随机颜色小方块的全部内容，需要的朋友可以来参考下。

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

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子

May 21 Javascript

Prototype Template对象学习

Jul 19 Javascript

让 JavaScript 轻松支持函数重载 (Part 2 - 实现)

Aug 04 Javascript

angularjs学习笔记之简单介绍

Sep 26 Javascript

JS密码生成与强度检测完整实例(附demo源码下载)

Apr 06 Javascript

深入理解MVC中的时间js格式化

May 19 Javascript

JQuery学习总结【二】

Dec 01 Javascript

ES6概念 Symbol toString()方法

Dec 25 Javascript

仿京东快报向上滚动的实例

Dec 13 Javascript

微信小程序实现指定显示行数多余文字去掉用省略号代替

Jul 25 Javascript

微信小程序静默登录的实现代码

Jan 08 Javascript

JavaScript 实现下雪特效的示例代码

Sep 09 Javascript

js代码验证手机号码和电话号码是否合法

Jul 30 #Javascript

javascript设计模式之对象工厂函数与构造函数详解

Jul 30 #Javascript

js判断浏览器类型及设备（移动页面开发）

Jul 30 #Javascript

javascript中if和switch，==和===详解

Jul 30 #Javascript

用javascript实现自动输出网页文本

Jul 30 #Javascript

理解javascript中的原型和原型链

Jul 30 #Javascript

原生js与jQuery实现简单的tab切换特效对比

Jul 30 #Javascript

You might like

php将数据库导出成excel的方法

2010/05/07 PHP

php日期操作技巧小结

2016/06/25 PHP

PHP CURL与java http使用方法详解

2018/01/26 PHP

php swoole多进程/多线程用法示例【基于php7nts版】

2019/08/12 PHP

网页设计常用的一些技巧

2006/12/22 Javascript

使用Plupload实现直接上传附件至七牛云存储

2014/12/26 Javascript

javascript获得当前的信息的一些常用命令

2015/02/25 Javascript

使用angularjs创建简单表格

2016/01/21 Javascript

jQuery的Each比JS原生for循环性能慢很多的原因

2016/07/05 Javascript

详解javascript立即执行函数表达式IIFE

2017/02/13 Javascript

vue组件如何被其他项目引用

2017/04/13 Javascript

JavaScript数据结构之双向链表定义与使用方法示例

2017/10/27 Javascript

Vue Cli3 创建项目的方法步骤

2018/10/15 Javascript

JS实现移动端在线签协议功能

2019/08/22 Javascript

JS控制GIF图片的停止与显示

2019/10/24 Javascript

[00:20]TI9观赛名额抽取Ⅱ

2019/07/24 DOTA

Python中几种操作字符串的方法的介绍

2015/04/09 Python

Python处理JSON时的值报错及编码报错的两则解决实录

2016/06/26 Python

Python自动化测试Eclipse+Pydev 搭建开发环境

2016/08/15 Python

python实现一个简单的并查集的示例代码

2018/03/19 Python

对Python random模块打乱数组顺序的实例讲解

2018/11/08 Python

Python中利用LSTM模型进行时间序列预测分析的实现

2019/07/26 Python

基于Python中的yield表达式介绍

2019/11/19 Python

解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题

2020/04/20 Python

文件上传服务器-jupyter 中python解压及压缩方式

2020/04/22 Python

Scrapy框架介绍之Puppeteer渲染的使用

2020/06/19 Python

Android Q之气泡弹窗的实现示例

2020/06/23 Python

Tensorflow使用Anaconda、pycharm安装记录

2020/07/29 Python

Python之京东商品秒杀的实现示例

2021/01/06 Python

有关HTML5中背景音乐的自动播放功能

2017/10/16 HTML / CSS

使用layui实现左侧菜单栏及动态操作tab项的方法

2020/11/10 HTML / CSS

澳大利亚100%丝绸多彩度假装商店：TheSwankStore

2019/09/04 全球购物

检举信的格式及范文

2014/04/04 职场文书

上班离岗检讨书

2014/09/10 职场文书

销售人员管理制度

2015/08/06 职场文书

普希金诗歌赏析（6首）

2019/08/22 职场文书