コレができないとヤバい！ - ２２３の Web スキルの学習

昨日、電車の中吊り広告で「コレができないとヤバい！」というのがあった。
「脳力ドリル」の広告で、１〜５０の数字が散らばってて、3分以内に全部順番に目で追えないと、脳が「ヤバい」らしい。

それを見て、これはひょっとすると java script の乱数と、最近極めた css の position を使えば同じ事が出来るかも！
ってことで、さっそく作ってみた。

＊更新の度に乱数で数字を表示
＊１〜２０まで目で追って、最後に OK ボタンをクリック
＊30秒以内に OK が押せなかった場合は、タイムアップのアラート

実際作ってみると、なかなか難しくて最初のイメージ通りすんなりとはいかなかった。
残念ながら、まだ全然 position を極めていないことも発覚したし…

現段階ではスキルが足りなくて妥協した部分もあるけど、いろいろと新しい命令とかルールとかがわかって、すごく勉強になった。

数字はあえて、見える程度に重なるように表示にしたけど、100回に1回くらいは重なりすぎて見えない時があるｗ
重ねないほうがいいかなあ。

もっと java script がわかってきたら、こんな脳トレをテーマにしたサイトもいいかもしれない。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
*{
	background-color:#000;
	color:#fff;
	font-size: 15px;
	font-weight:bold; }
p{line-height:1em;padding:5px;text-align:center;}
</style>
</head>
<body>
	<form>
	<input style="position:absolute;top:30px;left:255px;width:100px;" type="button" value="OK" onclick="sp()">
	</form>
<script type="text/javascript">

var c =["001","c44","111","fff","a20","349","fff","f00","444","00a","070","f70","e0e"];
var d =["a7f","faa","999","0a3","fee","fff","333","fff","ff0","bbf","bfb","feb","fdf"];
var e =["solid","double","groove","ridge","inset","outset"];

	var a =new Array();
	var xx=7 , yy=5 ;	
	for( i=0; i<xx; i++){ a[i] = new Array();
	for( j=0; j<yy; j++){ a[i][j] = 0; }}

for(i=20;i>0;i--){

	repeat:	for (;;){
	x=Math.floor(Math.random()*xx);
	y=Math.floor(Math.random()*yy);
	if (a[x][y]==0){a[x][y]++;break repeat;}}
	
	x=x*80+Math.floor(Math.random()*10 )+50;	
	y=y*80+Math.floor(Math.random()*10 )+80;

	f=Math.floor(Math.random()*30 )+20;
	
	k=Math.floor(Math.random()*25 )+1;
	h=Math.floor(Math.random()*2 );
	if (h==0){k+=335;}
		
		dat ="<p style='position:absolute;top:"+y+"px;left:"+x+"px;"   
		dat+="font-size:"+f+"px;"
		
			h=Math.floor(Math.random()*13);
			b=Math.floor(Math.random()*6);
			g=Math.floor(Math.random()*3)+3;			

			dat+="color:#"+c[h]+";"
			dat+="border:"+g+"px "+e[b]+" #"+c[h]+";"
			dat+="background-color:#"+d[h]+";"
					
		dat+="-webkit-transform: rotate("+k+"deg);-moz-transform: rotate("+k+"deg);"
		dat+="'>"

document.write(dat+i+"</p>");}

		function timeup(){
		alert("タイムアップ！\n30秒経過しました。");}

	function sp(){
	clearTimeout(time);
	alert("Good!");	}

time=setTimeout("timeup()",30000);

</script>
</body>
</html>