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 相关文章推荐
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