编程 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实现点击下载的小例子

Jul 10 Javascript

js实现鼠标滚轮控制图片缩放效果的方法

Feb 20 Javascript

AngularJS延迟加载html template

Jul 27 Javascript

jquery滚动条插件（可以自定义）

Dec 11 Javascript

JSON中key动态设置及JSON.parse和JSON.stringify()的区别

Dec 29 Javascript

基于VuePress 轻量级静态网站生成器的实现方法

Apr 17 Javascript

vux uploader 图片上传组件的安装使用方法

May 15 Javascript

vue.js动画中的js钩子函数的实现

Jul 06 Javascript

jQuery使用each遍历循环的方法

Sep 19 jQuery

vue多次循环操作示例

Feb 08 Javascript

vue中v-for循环选中点击的元素并对该元素添加样式操作

Jul 17 Javascript

详解vue 组件的实现原理

Nov 12 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

德劲1102收音机的打理维修案例

2021/03/02 无线电

使用PHP制作新闻系统的思路

2006/10/09 PHP

PHP设计模式之模板模式定义与用法详解

2018/12/20 PHP

PHPStudy下如何为Apache安装SSL证书的方法步骤

2019/01/23 PHP

JavaScript 实现??打印?理

2007/04/28 Javascript

在IE下获取object（ActiveX）的Param的代码

2009/09/15 Javascript

基于jQuery的固定表格头部的代码(IE6,7,8测试通过)

2010/05/18 Javascript

关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级

2010/10/14 Javascript

Jquery中获取iframe的代码

2011/01/11 Javascript

JQuery.ajax传递中文参数的解决方法推荐

2011/03/28 Javascript

ajax请求get与post的区别总结

2013/11/04 Javascript

Get中文乱码IE浏览器Get中文乱码解决方案

2013/12/26 Javascript

jQuery实现表单提交时判断的方法

2014/12/13 Javascript

BootStrap入门教程(二)之固定的内置样式

2016/09/19 Javascript

js实现键盘自动打字效果

2016/12/23 Javascript

Vue.js bootstrap前端实现分页和排序

2017/03/10 Javascript

nodejs+express实现文件上传下载管理网站

2017/03/15 NodeJs

vue不通过路由直接获取url中参数的方法示例

2017/08/24 Javascript

Vue项目分环境打包的实现步骤

2018/04/02 Javascript

解决bootstrap中下拉菜单点击后不关闭的问题

2018/08/10 Javascript

React手稿之 React-Saga的详解

2018/11/12 Javascript

python通过shutil实现快速文件复制的方法

2015/03/14 Python

Python中用memcached来减少数据库查询次数的教程

2015/04/07 Python

Python编码类型转换方法详解

2016/07/01 Python

PyQt5每天必学之拖放事件

2020/08/27 Python

详谈Pandas中iloc和loc以及ix的区别

2018/06/08 Python

Python实现随机创建电话号码的方法示例

2018/12/07 Python

pygame实现打字游戏

2021/02/19 Python

Python3搭建http服务器的实现代码

2020/02/11 Python

Django如何在不停机的情况下创建索引

2020/08/02 Python

HTML5 canvas基本绘图之绘制曲线

2016/06/27 HTML / CSS

跨域修改iframe页面内容详解

2019/10/31 HTML / CSS

建筑公司文秘岗位职责

2013/11/29 职场文书

优秀团员自我评价范文

2014/04/23 职场文书

热爱祖国的演讲稿

2014/05/04 职场文书

Nginx进程调度问题详解

2021/09/25 Servers