<!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. ASP.NET Core开发总结

    1.关于浏览器缓存,修改CSS文件和Javascript文件后调试,浏览器不更新问题,解决办法是在link标签和script标签引用的文件名后面添加版本信息如下: <link rel=" ...

  2. Python连接MySQL数据库之pymysql模块

    pymysql 在python3.x 中用于连接MySQL服务器的一个库:Python2中则使用mysqldb pymysql的模块的基本的使用 # 导入pymysql模块 import pymysq ...

  3. KAFKA跨主机部署网络不通解决思路

    Kafka的部署不仅需要集群可用,同时需要对orderer节点可连,这就是为什么有的时候,kafka集群本身没问题,但是orderer却总是报错. 为了试验kafka剥离方案的可行性,跨阿里云网络和内 ...

  4. mysql查询表是否存在

    查询表是否存在 SHOW TABLES LIKE "表名" tp5查询表是否存在 Db::query('SHOW TABLES LIKE "表名"');

  5. 关于li标签的value属性值的获取问题

    在前几天的开发过程中,遇到了这样一个问题. 在li标签中嵌入了一个value属性,如这样滴: <li id="ts1" value="0001">& ...

  6. XML 与 XML Schema的使用教程

    引言:我写本文的宗旨在于给需要使用XML,而又对XML不是很熟悉的人们提供一种使用思路,而不没有给出具体的     使用方法,至于下文中提到的使用方法,还未尝试过,都是从网上整理而来! 一.概述 什么 ...

  7. Qt551.OpenGL.ZC简单例子

    1.主要 模仿代码:OpenGL的教程 第3课 "tutorial03_matrices"的代码(E:\OpenGL_something\ogl-master) 2.参考代码:Qt ...

  8. CEBX格式的文档如何转换为PDF格式文档、DOCX文档？

    方正阿帕比CEBX格式的文档如何转换为PDF格式文档.DOCX文档? 简介: PDF.Doc.Docx格式的文档使用的非常普遍,金山WPS可以直接打开PDF和Doc.Docx文档,使用也很方便. CE ...

  9. NRF52832与W25Q80通信

    1 NRF52832SPI主机的功能描述 nRF52832SPIM的主要特征 3个SPI实例 支持SPI的模式0到模式3 支持DMA Individual selection of IO pin fo ...

  10. vue dialog在ios层级有问题

    :modal-append-to-body="false" 遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上