<!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. 算法（第四版）C# 习题题解——1.3

    写在前面 整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 这一节内容可能会用到的库文件有 ...

  2. 2018年—2019年第二学期第四周C#学习个人总结

    第五章面向对象高级包括:5.1类的继承中有5.1.1继承的概念:一是在现实生活中,继承一般指的是子女继承父辈的财产;在C#,类的继承是指在一个现有类的基础上去构建一个新的类,构建出来的新类被称作子类, ...

  3. React.js小书总结

    (迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...

  4. 解决 Cannot uninstall 'pyparsing' 问题

    参考 pyparsing 无法卸载导致安装 matplotlib 出错 解决 Cannot uninstall 'pyparsing' 问题 在安装 pydot 时遇到依赖 pyparsing 无法更 ...

  5. j2ee课程设计—基于activiti的请休假系统

    前言 课设基于SSM框架,数据库采用mysql,主要业务交给activiti,版本控制利用github. 参考资料: Intellij 部署SSM框架 Activiti就是这么简单 方大师的教材 下文 ...

  6. formdata 上传图片+进度条

    记得引入jquery //上传进度回调函数:          function progressHandlingFunction(e) {            if (e.lengthComput ...

  7. UVA - 11468 (AC自动机+动态规划)

    建立AC自动机,把AC自动机当做一张图,在上面跑L个节点就行了. 参考了刘汝佳的代码,发现可能有一个潜在的Bug--如果模式串中出现了没有指定的字符,AC自动机可能会建立出错. 提供一组关于这个BUG ...

  8. MIUI6系统如何启用root权限的教程

    MIUI6系统有没有办法启用了root权限?大家都清楚,Android机器有root权限,如果手机启用了root相关权限,就能够实现更好的功能,举例子,大家单位的营销部门同事,使用某些营销软件都需要在 ...

  9. 2018-2019-2 20165303《网络对抗技术》Exp2 后门原理与实践

    实验内容 (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用socat获取主机操作Shell, 任务计划启动 (0.5分) (3)使用MSF meterpreter( ...

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

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