首页
所有分类
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 相关文章推荐
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
Bootstrap源码解读下拉菜单（4）
Dec 23 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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
限流(2) tcp/ip(1) IP(1) 索引(8) 全局锁(1) 备份(2) update(2) 内置模块(1) 限速(1) 数据库卡死(1)
You might like
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
一个js写的日历（代码部分网摘）
2009/09/20 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
JS触摸与手势事件详解
2017/05/09 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
微信小程序websocket实现聊天功能
2020/03/30 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
python读取文本中的坐标方法
2018/10/14 Python
详解python中的hashlib模块的使用
2019/04/22 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
Bally巴利中国官网：经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
意大利网上药房：Farmacia 33
2020/01/27 全球购物
宿舍卫生检讨书
2014/01/16 职场文书
年度考核自我鉴定
2014/02/02 职场文书
代理协议书范本
2014/04/22 职场文书
2014年度工作总结报告
2014/12/15 职场文书
电信营业员岗位职责
2015/04/14 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
小学毕业感言200字
2015/07/30 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang