编程 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自动缩小超出大小的图片

Oct 12 Javascript

对jQuery的事件绑定的一些思考(补充)

Apr 20 Javascript

基于jquery ui的alert,confirm方案（支持换肤）

Apr 03 Javascript

基于JavaScript判断浏览器到底是关闭还是刷新(超准确)

Feb 01 Javascript

浅谈JS原生Ajax,GET和POST

Jun 08 Javascript

原生js实现弹出层登录拖拽功能

Dec 05 Javascript

vue2中,根据list的id进入对应的详情页并修改title方法

Aug 24 Javascript

jquery实现直播弹幕效果

Nov 28 jQuery

解决vue做详情页跳转的时候使用created方法数据不会更新问题

Jul 24 Javascript

JavaScript中如何调用Java方法

Sep 16 Javascript

Vue $attrs & inheritAttr实现button禁用效果案例

Dec 07 Vue.js

VUE之图片Base64编码使用ElementUI组件上传

Apr 09 Vue.js

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

追求程序速度，而不是编程的速度

2008/04/23 PHP

PHP字符编码问题之GB2312 VS UTF-8解决方法

2011/06/23 PHP

php代码运行时间查看类代码分享

2011/08/06 PHP

深入探讨<br />和 \r\n两者有什么区别??

2013/06/05 PHP

简单介绍PHP非阻塞模式

2016/03/03 PHP

程序员的表白神器“520”大声喊出来

2016/05/20 PHP

[原创]php实现数组按拼音顺序排序的方法

2017/05/03 PHP

thinkphp5.1 文件引入路径问题及注意事项

2018/06/13 PHP

[原创]网络复制内容时常用的正则+editplus

2006/11/30 Javascript

JS动画效果代码3

2008/04/03 Javascript

js从10种颜色中随机取色实现每次取出不同的颜色

2013/10/23 Javascript

原生JS实现图片左右轮播

2016/12/30 Javascript

Express+Nodejs 下的登录拦截实现代码

2017/07/01 NodeJs

谈谈对vue响应式数据更新的误解

2017/08/01 Javascript

JS实现获取汉字首字母拼音、全拼音及混拼音的方法

2017/11/14 Javascript

基于jQuery.i18n实现web前端的国际化

2018/05/04 jQuery

bootstrap 路径导航分页进度条的实例代码

2018/08/06 Javascript

vue2实现搜索结果中的搜索关键字高亮的代码

2018/08/29 Javascript

nodejs和react实现即时通讯简易聊天室功能

2019/08/21 NodeJs

详解JavaScript 的执行机制

2020/09/18 Javascript

Python对象转换为json的方法步骤

2019/04/25 Python

python实现对图片进行旋转,放缩,裁剪的功能

2019/08/07 Python

Python assert关键字原理及实例解析

2019/12/13 Python

Melijoe英国官网：法国儿童时尚网站

2016/11/18 全球购物

希尔顿酒店中国网站：Hilton中国

2017/03/11 全球购物

this关键字的含义

2015/04/08 面试题

如何开启linux的ssh服务

2015/02/14 面试题

Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗

2013/05/01 面试题

五好党支部事迹材料

2014/02/06 职场文书

考生诚信考试承诺书

2014/05/23 职场文书

预防艾滋病宣传标语

2014/06/25 职场文书

乡镇保密工作责任书

2014/07/28 职场文书

2014年驾驶员工作总结

2014/11/18 职场文书

谢师宴邀请函

2015/02/02 职场文书

Django如何创作一个简单的最小程序

2021/05/12 Python

详解Laravel服务容器的优势

2021/05/29 PHP