- ベストアンサー
背景色を一定時間ごとにランダム変化
http://wakabano.cool.ne.jp/dream/useful/snippets/sni_03.html ↑のページを参考に、特定の要素の背景色を一定時間ごとにランダム変化するJavascriptを考えた末、以下のようになりました。 function ChangeBg(){ var r,g,b; r = decToHex(randomNumber(256)-1); g = decToHex(randomNumber(256)-1); b = decToHex(randomNumber(256)-1); if(document.getElementById){ document.getElementById('vector').style.backgroundColor= "#" + r + g + b ; T_ID=setTimeout("ChangeBg()",30000); } else{ if(document.all){ document.all('vector').style.backgroundColor= "#" + r + g + b ; T_ID=setTimeout("ChangeBg()",30000); } } } function randomNumber(limit){ return Math.floor(Math.random()*limit); } function decToHex(dec) { var hexStr = "0123456789ABCDEF"; var low = dec % 16; var high = (dec - low)/16; hex = "" + hexStr.charAt(high) + hexStr.charAt(low); return hex; } これに、<body onLoad="ChangeBg()">と書いて、30秒ごとにid名が「vector」の<div>要素の背景色を変化させることには成功したのですが、たとえばclass名が同じ複数の<div>要素の背景色を一定時間ごとに変化させることは可能でしょうか。また、<body onLoad="ChangeBg('abc')">のように、id名をhtmlから指定する場合はどうすればいいのでしょうか。 前者は全くやり方がわからなくて、後者は四苦八苦した末、ページロード時にランダムに変わるのみで、その後は変化しませでした。
- twinhourse
- お礼率61% (47/77)
- JavaScript
- 回答数5
- ありがとう数1
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
[修正] ＜＜＜ そのソースをコピーしてテストすると時々色が取れなくて色指定エラーが出るようです。 arexis氏のご指摘のように、わたしもサンプルのrandomメソッドの扱いに疑問を持っていましたので、 一言追記します。 Math.random(256)のreturn値は、 0<= Math.random(256) <256 ですが、しばしば（1/256の確率で） 1未満の値をとることがあります。このとき Math.floor(Math.random()*limit) は、 値0をとります。すると decToHex(randomNumber(256)-1) は、-1となり、関数decToHex(dec)は、２文字ではなく、１文字を返すことになり、 tag.style.backgroundColor= "#" + r + g + b ; がうまく行きません。したがって decToHex(randomNumber(256)-1) ではなく decToHex(randomNumber(256)) としたほうがいいでしょう。
その他の回答 (4)
- auty
- ベストアンサー率58% (284/486)
＜＜＜ そのソースをコピーしてテストすると時々色が取れなくて色指定エラーが出るようです。 arexis氏のご指摘のように、わたしもサンプルのrandomメソッドの扱いに疑問を持っていましたので、 一言追記します。 Math.random(256)のreturn値は、 0<= Math.random(256) <256 ですが、極稀にでも 0の値をとることがあります。このとき decToHex(randomNumber(256)-1) は、-1となり、関数decToHex(dec)は、２文字ではなく、１文字を返すことになり、 tag.style.backgroundColor= "#" + r + g + b ; がうまく行きません。したがって decToHex(randomNumber(256)-1) ではなく decToHex(randomNumber(256)) としたほうがいいでしょう。
<html> <head><style>.red{background-color:#f00;}</style></head> <body> <div class="red">a</div> <div id="abc">サイケヘ、゛、ヌ、ヒ</div> <div class="red">c</div> 0xFFFFFF = 256*256*256-1 =16777215 </div> </body> <script> setInterval("chgbk('red')",1000); setInterval("chgbkID('abc')",2000); function chgbk(cn){ o=document.getElementsByTagName('DIV'); c=Math.floor(Math.random()*16777215); for(i=0;i<o.length;i++){if(o[i].className==cn) o[i].style.backgroundColor=c;} } function chgbkID(id){ document.getElementById(id).style.backgroundColor=Math.floor(Math.random()*16777215); } </script> </html>
- arexis
- ベストアンサー率66% (66/99)
そのソースをコピーしてテストすると時々色が取れなくて色指定エラーが出るようです。 色のとり方も含めて書き換えてしまいました。 複数箇所の意味が、複数箇所を同じ色で と解釈。 BODY の onload 記述から指定をする方法として ■IDの場合 <html> <head> <script type="text/javascript"> function ChgBG(){ function $(id){ return document.getElementById? document.getElementById(id) : (document.all? document.all(id) : null); } var ids = arguments; function TimeLoop(){ var col= '#'; for(var i=0; i<6; i++){ col += parseInt(Math.random()*16,10).toString(16); } for(var j=0; j<ids.length; j++){ $(ids[j]).style.backgroundColor = col; } T_ID = setTimeout(TimeLoop,1000); } TimeLoop(); } function StopChg(){ clearTimeout(T_ID) } </script> </head> <body onload="ChgBG('vector','yahoo')"> <div id="vector" style="width:200px; height:50px;"></div> <br> <div id="yahoo" style="width:200px; height:50px;"></div> </body> </html> 複数のIDを bodyタグのonloadから指定可能な物。 １つならChgBG(id)、複数なら ChgBG('id','id','id') の様に必要なだけ引数として渡す。 ■クラス名の場合 <html> <head> <script type="text/javascript"> function ChgBG(){ var classes= ','; for(var i=0; i<arguments.length; i++){ classes += arguments[i] + ','; } var tags= document.body.getElementsByTagName("*"); var tg = new Array(); for(var j=0; j<tags.length; j++){ if(classes.match(','+ tags[j].className +',')){ tg.push(tags[j]) } } function TimeLoop(){ var col= '#'; for(var i=0; i<6; i++){ col += parseInt(Math.random()*16,10).toString(16); } for(var j=0; j<tg.length; j++){ tg[j].style.backgroundColor = col; } T_ID = setTimeout(TimeLoop,1000); }; TimeLoop(); } function StopChg(){ clearTimeout(T_ID) } </script> </head> <body onload="ChgBG('CB1','cb2')"> <div class="CB1" style="width:200px; height:50px;"></div> <br> <div class="CB1" style="width:200px; height:50px;"></div> <br> <div class="cb2" style="width:200px; height:50px;"></div> </body> </html> 複数のクラス名を bodyタグのonloadから指定可能な物。 １つならChgBG(class)、複数なら ChgBG('class','class','class') の様に必要なだけ引数として渡す。 ********************************* どちらも止めたい場合は、StopChg() を呼び出すだけ。
- auty
- ベストアンサー率58% (284/486)
簡潔に述べさせてもらうと。 ・ class名が同じ複数の<div>要素の場合、 var tags=document.getElementsByTagName('div'); で、tagsに配列が入るので for(var i = 0; i < tags.length; i++) { } のループの中でクラス名()が一致するものの背景のみを変更する形をとると良いでしょう。 ・ id名をhtmlから指定する場合は、 function ChangeBg(){ を function ChangeBg(id){ に変更し、２箇所の 'vector' を id に替えればよいと思います。
お礼
遅くなりましたが、素早い回答をありがとうございました。