java script DOM の活用 - ２２３の Web スキルの学習

前に作った脳トレプログラムでスキルが足りなくて妥協した部分が、先週習ったDOMを使うとできそうだったので、また挑戦。

＊秒数をリアルタイムで表示
＊1〜20まで順番にクリックしていく
＊順番が合っていれば、秒数の下にクリックした番号が追加されていく
＊特に制限時間は無いけど、なるべく急いでやると脳に良い
リベンジ

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
*{	
　　　　padding :0;
	background-color:#000;
	font-size: 15px;
	font-weight:bold;}
p{	
	margin:0;
	line-height:1em;
	padding:5px;
	text-align:center;
	cursor:pointer;}
#time{	
	margin :10px 0 10px 50px;
	width	:560px;
	text-align:center;
	font-size:50px;
	color	:#f00;}
#seik{	
	background-color :#333;
	padding :3px 3px 3px 45px;
	color :#fff;
	font-size :16px;
	margin	:0px 50px;
	width :560px;
	text-align:left;}
#main{　margin :0 0 800px 0;}
</style>
<title>java script 脳トレ</title>
</head>
<body>
	<div id='time'>0</div>
	<div id='seik'>　</div>
	<div id='main'>
<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 z =1;

	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; }}
	
	function rnd(r){ return(Math.floor(Math.random()*r ));}

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

	repeat:	for (;;){ x=rnd(xx); y=rnd(yy);
	if (a[x][y]==0){a[x][y]++;break repeat;}}
	
	x=x*80+50; y=y*80+140;

	f=rnd(15)+25; k=rnd(50)+335;
	
		dat ="<p id='"+i+"' style='position:absolute;top:"+y+"px;left:"+x+"px;"   
		dat+="font-size:"+f+"px;"
		
			h=rnd(13); b=rnd(6); g=rnd(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);"
			dat+="-moz-transform: rotate("+k+"deg);'>"

	document.write(dat+i+"</p>");}
     
	var sk=""; document.onmousedown = function(){ for ( j=1;j<21;j++) { hant(j);}}

	function hant(j){
	document.getElementById(j).onclick = function(){if(j==z){tik();z++;}}
	if (z==20){tik();z=0;clear();}}

	function clear(){ alert(i-1+"秒でした。"); clearInterval(time);}
	function tik(){ sk+=z+"　";document.getElementById("seik").innerHTML=sk;}

   	i=1; time=setInterval(function (){
        document.getElementById("time").innerHTML=i;
        i++; if (z>20){z=0;clearInterval(time);}},1000);

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