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 学习笔记二 字符串拼接
Mar 28 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
JS实现密码框效果
Sep 10 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
php目录管理函数小结
2008/09/10 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
详解Python中用于计算指数的exp()方法
2015/05/14 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
成人大专自我鉴定范文
2013/10/19 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
上课迟到检讨书
2014/02/19 职场文书
逃课上网检讨书
2014/02/20 职场文书
2014年采购员工作总结
2014/11/18 职场文书
个人工作能力自我评价
2015/03/05 职场文书
博士生专家推荐信
2015/03/25 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
python如何查找列表中元素的位置
2022/05/30 Python