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实现随机颜色小方块的全部内容,需要的朋友可以来参考下。

Javascript 相关文章推荐
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
使用rollup打包JS的方法步骤
Dec 05 Javascript
JavaScript计算出两个数的差值
Mar 19 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 SQLite类
2009/05/07 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
PHP模板解析类实例
2015/07/09 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
js下弹出窗口的变通
2007/04/18 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
基于python 取余问题(%)详解
2020/06/03 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
应届生法律求职信
2013/10/22 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
《雨点》教学反思
2014/02/12 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
离职告别感言
2015/08/04 职场文书
python requests模块的使用示例
2021/04/07 Python
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
详解Java实践之建造者模式
2021/06/18 Java/Android
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript