<!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. mime类型的解析与应用

    MIME类型解析   MIME(Multipurpose Internet Mail Extensions)多用途网络邮件扩展类型,可被称为Media type或Content type, 它设定某种 ...

  2. Unix系统的启动

    系统启动后: 第一个运行的进程是init 进程标识符为1. init派生一个getty.该进程负责打开终端端口,提供标准输入来源和标准输出.标准输出的去处,并且在屏幕上显示一个登录提示符 接下来执行/ ...

  3. vue--vant组件库field输入框

    安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...

  4. Unity3D|-XLua热更新用法的大致流程

    xlua是由腾讯维护的一个开源项目,我们可以在github上下载这个开源项目并查看一些相关文档 官网:https://github.com/Tencent/xLua 配置文档:https://gith ...

  5. ArcGIS JS API4 With VueJS集成开发

    1.USING VUEJS WITH ARCGIS API FOR JAVASCRIPT,集成VUE到ArcGIS JS开发中. 2.ARCGIS API 4 FOR JS WITH VUE-CLI ...

  6. centos7 基础命令

    一: linux基础 (1) 查看服务器的IP信息 ip add showifconfig (2) 操作网卡命令(重启网络和启用网卡) systemctl restart networksystemc ...

  7. 《c++ concurrency in action》读书笔记1

    1. 什么是并发通俗来说,并发指两个或者多个独立的事件(活动)同时发生.比如,一边走路一边说话,两个手同时做不同的事情.计算机系统的并发是指一个系统并行处理多个独立的事件(活动), 而不是按顺序或者一 ...

  8. 举例说明$POST 、$HTTP_RAW_POST_DATA、php://input三者之间的区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. java的equals()与hashCode()以及包装类中的实现

    1. hashcode 1.1 hashcode来源 1.2 hashcode的形式 1.3 hashcode目的 1.4 hashcode规则 1.5 hashcode作用体现 1.6 重写hash ...

  10. springboot使用fastjson中文乱码解决方法 【转载】

    以前使用fastjson替换jackson时,没有直接在页面打印过json,都是js使用没有出现乱码,偶然 打印出来出现了中文乱码 之前使用的配置方式 @Configuration public cl ...