<!doctype html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Document</title>

<style type="text/css">

body,div{

width:100%;

height:100%;

margin:0px;

padding: 0px;

overflow-x:hidden;

overflow-y:hidden;

}

</style>

</head>

<body onload="change()">

<script type="text/javascript">

var clientWidth = document.documentElement.clientWidth;

var clientHeight = document.documentElement.clientHeight;

var Xnum = 200;//每一行的数量

var Ynum = Xnum*clientHeight/clientWidth; //每一列的数量

var client = clientWidth/Xnum;

var height = clientHeight/Ynum

console.log(clientWidth);    console.log(clientHeight);

console.log(Xnum);    console.log(Ynum);

console.log(client);    console.log(height);

function randomVal(val){

    return Math.floor(Math.random()*(val + 1));

}

function randomColor(){

    return 'rgb(' + randomVal(255) + ',' + randomVal(255) + ',' + randomVal(255) + ')';

}

function change(){

    document.body.innerHTML="";

    //document.body.style.backgroundColor=randomColor();

    for (var int = 0; int < Xnum*Ynum; int++) {

        createDiv();

    }

    window.setTimeout(change,500);

}

function createDiv(){

    var oDiv=document.createElement("div");

    //oDiv.style.border="1px solid black";

    //oDiv.style.width="500px";

    //oDiv.style.height="300px";

    //Odiv.id="box";                            //创建div的id为box

    //Odiv.className="Box";

    //text-align:center;line-height:220px";    //创建div的css样式

    //oDiv.innerText=i;

    oDiv.style.cssText="width:"+client+"px;height:"+height+"px;float:left;background-color:"+randomColor();

    document.body.appendChild(oDiv);

}

</script>

</body>

</html>

无聊的js(马赛克)的更多相关文章

  1. 无聊的人用JS实现了一个简单的打地鼠游戏

    直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠) ...

  2. javascript马赛克遮罩图片切换效果:XMosaic.js(转)

    新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...

  3. 如何使用 js 写一个正常人看不懂的无聊代码

    如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...

  4. three.js 将图片马赛克化

    这篇郭先生来说说BufferGeometry,类型化数组和粒子系统的使用,并且让图片有马赛克效果(同理可以让不清晰的图片清晰化),如图所示.在线案例点击博客原文 1. 解析图片 解析图片和上一篇一样 ...

  5. js截取图片上传（仅原理）----闲的无聊了代码就不共享了！写的难看，不好意思给你们看了（囧）

    就算世界再坑爹,总有一些属性能带你走出绝望(伟大的absolute) 今天吐槽一下!......在我的世界里没有正统UI,所以效果图永远都是那么坑爹! 这里我要感谢有个position:absolut ...

  6. 无聊js画了个菱形

    function repeat(str, count) { return count < 0 ? '' : (new Array(count)).join(str); } function di ...

  7. 判断js引擎是javascriptCore或者v8

    来由   纯粹的无聊,一直在搜索JavaScriptCore和SpiderMonkey的一些信息,却无意中学习了如何在ios的UIWebView中判断其js解析引擎的方法: if (window.de ...

  8. 消除类游戏(js版)

    最近一直在玩一款消灭星星的消除类游戏,周末无聊就用js也写了一遍,感觉玩比写还困难一直玩不到10000分.废话不多说直接上源码. 效果图(ps 页面有点难看木有美工) 代码总共456行,未经过严格测试 ...

  9. fullPage.js学习笔记

    中秋节,一个人呆着,挺无聊的,还是学习最有趣,不论是什么,开阔视野都是好的. 参考网址:http://www.dowebok.com/77.html  上面有详细介绍及案例展示,很不错哦,可以先去看看 ...

随机推荐

  1. rabbitmq 3.7.8基于centos7部署文档

    rabbitmq 3.7.8部署文档 安装erlang 安装依赖环境 yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel ope ...

  2. 就是要用Vim写Vue

    Vim关于Vue的生态链还是很少,不过凑活凑活还是能用的. 缩进 缩进采用的是两个空格,.vimrc配置: au BufNewFile,BufRead *.html,*.js,*.vue set ta ...

  3. Mapped Statements collection already contains value for ***.***的问题

    情景,在我们配置项目或者开发的过程中,可能由于项目工程量大或误操作等原因,造成Map映射文件的ID重复,造成项目启动报以下错误, org.springframework.beans.factory.B ...

  4. VS2010下安装boost库

    在我们的C++项目中安装boost库,下面以VS2010版本作为例子,其它版本的设置也差不多. 一.编译生成boost库 1.下载最新的boost(本人下载的是boost_1_56_0).boost官 ...

  5. credential for git

    1, 编辑~/.gitconfig文件怎加如下配置 [credential] helper = store 2,执行 git pull.输入username, password. 3.检查~/.git ...

  6. webpack dllPlugin使用（基于vue-cli webpack模板）

    由于本例单入口时打包的文件体积过大,将其分成多入口. 主要涉及到的几个文件为: /index.html, /webpack.dll.config.js, /build/webpack.base.con ...

  7. vue--js里跳转页面

    我们知道在vue里进行页面跳转的话,我们使用<router-link>这个标签 那在构造函数里我们不能直接操纵DOM元素,我们又该如何进行页面跳转呢? 步骤1: 我们先在DOM里设置三个按 ...

  8. Pandas 基础(16) - Holidays

    这节依然是关于时间方面的知识.上一节学习了如何获取日期序列的函数, 以及通过一些基本的参数设置可以使时间序列跳过休息日等.这一节, 将要深入学习这个点, 做更自定义的设计. 通过上一节的学习, 我们知 ...

  9. Cannot resolve classpath entry: /Program Files/IBM/SQLLIB/java/db2java.zip

    在mybatis的逆向工程中,使用java代码和xml配置文件生成时出现以下的错误 原来自己在复制官方配置文件的参考时将这一句也复制了进来 删掉后运行即可!成功的话控制台是没有输出的

  10. js斐波那契数列

    斐波那契数列指的是这样一个数列 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89...... 这个数列从第3项开始,每一项都等于前两项之和. 1.递归算法: function ...