首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
基于JavaScript实现随机点名器
Feb 25 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
innoDB(3) DBLink(1) 磁盘分区(1) 复读(1) MVCC(4) IIS7(1) 事务并发(1) .NET Framework(2) GZIP(2) 幻读(5)
You might like
《魔兽争霸3》重制版究竟重制了什么？玩家：这么糊弄真的好吗？
2020/05/04 魔兽争霸
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
Python常用正则表达式符号浅析
2014/08/13 Python
Django admin美化插件suit使用示例
2017/12/12 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python数字类型math库原理解析
2020/03/02 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
基于python实现对文件进行切分行
2020/04/26 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
美国大尺码女装零售商：TORRID
2016/10/01 全球购物
超市开店计划书
2014/04/26 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
化工见习报告范文
2014/10/31 职场文书
个人工作保证书
2015/02/28 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
浅谈JS的原型和原型链
2021/06/04 Javascript
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python
Redis基本数据类型List常用操作命令
2022/06/01 Redis