<!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. goldengate密码加密

    ----------------ogg加密GGSCI (ogghost) 10> encrypt password goldengate,ENCRYPTKEY defaultUsing defa ...

  2. rsync+sersync实现代码同步

    APP02安装 rsync服务端 yum install rsync vim /etc/rsyncd.conf pid file=/var/rsynclog/rsyncd.pid log file=/ ...

  3. 【做题】POI2011R1 - Plot——最小圆覆盖&倍增

    原文链接 https://www.cnblogs.com/cly-none/p/loj2159.html 题意:给出\(n\)个点,你需要按编号将其划分成不超过\(m\)段连续的区间,使得所有每个区间 ...

  4. Visual Studio 2017 和 Visual Assist X 番茄助手的安装教程

    声明:本文所提供的所有软件均来自于互联网,仅供个人研究和学习使用,请勿用于商业用途,下载后请于24小时内删除,请支持正版! 一.Visual Studio 2017的安装教程 Visual Studi ...

  5. abap 增强查找小程序

    *&---------------------------------------------------------------------* *& Report  ZEXIT *& ...

  6. PostgreSQL 与 PostGIS

    PostgreSQL 是一种对象-关系型数据库管理系统(ORDBMS),也是目前功能最强大.特性最丰富和最复杂的自由软件数据库系统.它起源于伯克利(BSD)的数据库研究计划,目前是最重要的开源数据库产 ...

  7. Unity外包 UE4外包 项目案例平台开通通知

    长年承接Unity外包 UE4外包,大家好,本公司团队已将案例上传至专门的案例官网. 欢迎联系我们索取,谢谢! 有项目外包请联系QQ:372900288 索取案例.

  8. react-native webView android使用本地html问题

    react-native WebView组件使用本地html时候,一般都是这样使用 var source = require('../html/my.html') : <WebView sour ...

  9. Asp.Net Boilerplate Project 使用swagger调试api

    文件有点大,去掉了packages文件夹,(Swashbuckle.Core.5.6.0) 链接:https://pan.baidu.com/s/1DzMLhFyRav0dufS4dTeMzg 提取码 ...

  10. jmeter简单得压力测试

    Jmeter教程 简单的压力测试 Jmeter是一个非常好用的压力测试工具.  Jmeter用来做轻量级的压力测试,非常合适,只需要十几分钟,就能把压力测试需要的脚本写好. 阅读目录 什么是压力测试 ...