その他　面白７-２■　自動でランダムにブロック消し・色

安倍自民と
電通支配のテレビは
日本を滅ぼす!
共謀罪反対!!

●2017/06/16：即時関数で囲んで、グローバル変数を消しました。
ブロック（タイル）が自動で、ランダムに次々に消えていくJavaScriptです。
原本は教えて！goo の「回答者：kata_kori」さんの分を、上からではなくランダムに変更しました。

消えるブロック（タイル）を色ではなく画像にすることも可能です。ブロックの背景色を指定する下記の部分で背景画像を指定します。
var bc="url(画像名)";　//★ブロックの背景画像

■同じJavaScriptのソースで、画像のブロックはこちら → 面白７■自動でランダムにブロック消し
■自動で上からブロック消しのJavaScriptはこちら → 面白７-１■自動で上からブロック消し

■2017/06/16：var もれ修正

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>その他　面白７-２■　自動でランダムにブロック消し・色</title>

<!--★背景色と文字指定。不要なら削除-->
<style type="text/css"><!--
body{background:#acf;}/*★背景色　水色*/

.title{
margin-top:-20px;
color: #00f;
font-size: 80px;
font-weight: bold;
text-shadow: 10px 10px 5px #999;
text-align:center;
line-height:100px;
}
--></style>

</head>
<body>

<!--■記述参考例：JavaScriptの上に記述すれば、全部ブロックの下の表示になります。JavaScriptよりも下に記述した文章や画像の位置指定に、position:absolute;指定があると、ブロックの上に表示されてしまうので注意して下さい。-->

<p style="margin-left:2em; color:#000;">ブロックの色や大きさ（数）の指定ができます。</p><!--■文章の記述参考例-->

<p class="title">安倍自民と<br>電通支配のテレビは<br>日本を滅ぼす!<br>
<span style="color:red;">共謀罪反対!!</span></p><!--■文章の記述参考例-->

<!--★ここからコピー。位置はbodyの中ですが、ブロックを一番上に表示するためにbodyの一番下に記述して下さい。-->
<script type="text/javascript"><!--
/*===========================================================================
自動でランダムブロック消し By　http://oshiete.goo.ne.jp/qa/799579.html(回答者：kata_kori) 2017/06/16 
ランダム参考：getElementsByTagName("div")を配列に置き換える：By(inamenaiの日記) http://d.hatena.ne.jp/inamenai/20090204/p1
==============================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var bc="#fff"; //★ブロック用の背景色。色ではなく背景画像を指定する時は、var bc="url(画像名)";で指定
var wb=30;     //★ブロックの横幅。単位px
var hb=30;     //★ブロックの縦幅。単位px
var spd=30     //★ブロックの消える速度。小さいほど速い
var stt=1000;  //★ページを開いてからブロック消しが自動開始するまでの時間。1000=1秒
var sp=0;      //★ブロック同士の隙間。単位px
//★CSSでブロックの内側にボカシの影。不要ならvar Bcss="";で。
var Bcss=""; 

//指定ここまで------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var n=0,i=0,j=0,a=0; 
var len,r;
var ww=window.innerWidth, hh=window.innerHeight;
var w=Math.floor(ww/wb), h=Math.floor(hh/hb);
function setTile() { 
var wTag="";
for (j=0; j<=h; j++) {
for (i=0; i<=w; i++) {
wTag +="<div id='block"+n+"' style='position:absolute; top:"+j*hb+"px; left:"+i*wb+"px; width:"+(wb-sp)+"px; height:"+(hb-sp)+"px; background:"+bc+";"+Bcss+"'></div>";
n++;
}}
$("tile").innerHTML=wTag;
$("tile").style.visibility="visible";
setTimeout(setBlock,stt);//■ブロック消しの開始時間
}
document.write("<div id='tile' style='position:fixed;top:0;left:0;'></div>");//■原本のhtml記述をこちらへ変更。absoluteをfixedへ変更
setTile();
var dv=$("tile").getElementsByTagName("div");
var arr=new Array(dv.length);// 取得したdvを配列に詰め替える
for (a=0; a<dv.length; a++){arr[a]=dv[a];}
function setBlock() {
len=arr.length;
r=Math.floor(Math.random()*len);//ランダム用
if (typeof arr[r] !=='undefined') {arr[r].style.visibility='hidden';}//Firefoxのコンソールのヒントより
arr.splice(r,1);//ランダム用。表示済みは重複させない
setTimeout(setBlock,spd);
} 
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

面白７-２■ 自動でランダムにブロック消し・色 最終修正日 : 2017/06/16

　面白７-２■　自動でランダムにブロック消し・色　　　　最終修正日 : 2017/06/16