• ベストアンサー

背景色を一定時間ごとにランダム変化

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から指定する場合はどうすればいいのでしょうか。 前者は全くやり方がわからなくて、後者は四苦八苦した末、ページロード時にランダムに変わるのみで、その後は変化しませでした。

質問者が選んだベストアンサー

  • ベストアンサー
  • auty
  • ベストアンサー率58% (284/486)
回答No.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)
回答No.4

＜＜＜　そのソースをコピーしてテストすると時々色が取れなくて色指定エラーが出るようです。 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)) としたほうがいいでしょう。

全文を見る
すると、全ての回答が全文表示されます。
noname#84373
noname#84373
回答No.3

<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)
回答No.2

そのソースをコピーしてテストすると時々色が取れなくて色指定エラーが出るようです。 色のとり方も含めて書き換えてしまいました。 複数箇所の意味が、複数箇所を同じ色で と解釈。 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)
回答No.1

簡潔に述べさせてもらうと。 ・　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 に替えればよいと思います。

twinhourse
質問者

お礼

遅くなりましたが、素早い回答をありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQueryを使ってランダムに表示

    jQueryを使って5つのボックス要素を、ランダムに3つ表示させています。 現在はページを読み込むたびに表示を切り替えていますが、これを「一定時間で表示を切り替え」に変更する事は可能でしょうか？ できればjsのみの修正でできれば良いのですが…。 どなたかお助けください。よろしくお願いいたします。 jsとhtmlは以下のようにしています。 jQuery(function($) { $.fn.extend({ randomdisplay : function(num) { return this.each(function() { var chn = $(this).children().hide().length; for(var i = 0; i < num && i < chn; i++) { var r = parseInt(Math.random() * (chn - i)) + i; $(this).children().eq(r).show().prependTo($(this)); } }); } }); $(function(){ $("[randomdisplay]").each(function() { $(this).randomdisplay($(this).attr("randomdisplay")); }); }); }); <div randomdisplay="3"> <div id="box">ランダム1</div> <div id="box">ランダム2</div> <div id="box">ランダム3</div> <div id="box">ランダム4</div> <div id="box">ランダム5</div> </div>

  • マウスを当てると、サイコロの背景色を変化するように

    したいです。 function senntaku(IMG){document.image1.src=IMG} document.write('<img onMouseOver="senntaku('MAPsenntaku.png');" class="simap" name="image1" src="img/MAP.png"/><img onclick="masusaikoro();" src="sai1.png" class="saikoro" name="saikoro">'); 上記のソースでサイコロの背景の画像がマウスに当たるとMAP.pngからMAPsenntaku.pngに変わるように作ったつもりですが、全然変わらない所か、サイコロ自体見えなくなりました。 どう修正したら、変える事ができるのか、教えてください。 <html> <head> <link rel="stylesheet" href="daisu.css" type="text/css"/> <script src="daisu.js"></script> <title>ダイス戦略</title> </head> <body> <div id="title"> <p>あああ</p> <p><button id="btn_gamennkirikae" type="button">ああああ</button></p> </div> <div id="gamegamenn"> <p><button id="btn_hitori" type="button">あああああ</button></p> </div> <div id="map"> <ul id="sima"> <script type="text/javascript"> /*サイコロ*/function saikoro(){ var sai=new Array("sai1.png","sai2.png","sai3.png","sai4.png","sai5.png","sai6.png"); var imgs = document.querySelectorAll('.saikoro'); for (var i = 0; i < imgs.length; i ++) { var r = Math.floor(Math.random()*sai.length); imgs[i].setAttribute('src', sai[r]); } } function masusaikoro(){ var sai=new Array("sai1.png","sai2.png","sai3.png","sai4.png","sai5.png","sai6.png"); var imgs = document.querySelectorAll('.saikoro'); for (var i = 0; i < imgs.length; i ++) { var r = Math.floor(Math.random()*sai.length); imgs[i].setAttribute('src', sai[r]); } } function senntaku(IMG){document.image1.src=IMG}　＊＊＊＊ここと＊＊＊＊＊ document.write('<li>'); document.write('<img onMouseOver="senntaku('MAPsenntaku.png');" class="simap" name="image1" src="img/MAP.png"/><img onclick="masusaikoro();" src="sai1.png" class="saikoro" name="saikoro">');　　　　　　＊＊＊ここ＊＊＊＊ document.write('</li>'); </script> </ul> <div id="hyouzi"> </div> </div> <body> </html>

  • 背景ランダム

    JavaScriptを使って背景をランダムに変更したいので すが、その背景ごとにを左上固定や縦リピートなど を設定することは出来るのでしょうか？ 宜しくお願い致します ちなみにCSSは基本だけですが理解しています <SCRIPT LANGUAGE="JavaScript"> <!-- function randomWall() { if (navigator.appVersion > '5' || (navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion > '4')) { var max = 6; wall = Math.floor(Math.random() * max) + 1; if (wall == 1) { document.body.background = '1.gif' } else if (wall == 2) { document.body.background = '2.gif} } } //--> </SCRIPT>

  • ランダムにページを表示するスクリプト

    最近社内のホームページを作ることになった初心者です。 トップページの中に３箇所、インラインフレームを使い別のページを 表示させるというものを考えております。 その際に、インラインフレーム内に表示させるページがランダムで選ばれるようにscriptを用いてやってみましたが、３箇所あるインラインフレームのうちの１箇所にしか表示されません・・・。 <script type="text/javascript"> window.onload = function(){ var c = 3; // var ifm = document.getElementById('aaa'); var ifm = document.getElementById('bbb'); var ifm = document.getElementById('ccc'); var r = Math.floor( Math.random() * c ); var urls = new Array(); urls[0] = 'http://www.co.jp'; urls[1] = 'http://www.co.jp'; urls[2] = 'http://www.co.jp'; ifm.src = urls[r]; } </script> あとは３箇所のフレーム内にIDを設定すれば上手く良くと思ったのですが、１箇所にしか表示されません；； 改善点などございましたらご教授いただけないでしょうか？

  • 一定時間で変化する画像とリンク

    業者さんにトップのページを作成してもらいました。 一定時間で画像が変化するようになっているのですが、 その画像ごとにクリックした際に違うリンクを貼りたいのですが 初心者の為、よくわかりません。 下記ソースですが どこを編集したらよいのでしょうか？ <!-- //変更秒間隔を指定 var sec = 5; sec = sec * 1000; arrI = new Array("top_P1.jpg","top_P2.jpg","top_P3.jpg") var num = arrI.length; var arrO = new Array(); for (var i=0;i<num;i++) { arrO[i] = new Image(); arrO[i].src = arrI[i]; } i = 0; function cngImg(){ if(document.all){ document.images.img.style.filter="blendTrans()"; document.images.img.filters.blendTrans.Apply(); } document.images.img.src = arrO[i].src; if(document.all){ document.images.img.filters.blendTrans.Play(); } i ++; if(i >= num){i = 0;} setTimeout("cngImg()",sec); } //-->

  • 順番にセルの背景色をつけたい

    javascriptを使って セルの背景色一定の時間で順番に変える方法を調べています。 ボタンをクリックすると □□□□ ↓ ■□□□ ↓ □■□□ ↓ □□■□ ↓ □□□■ と変化するようなものを作成したいと考えております。 下記のソースでalertを出すと実現できるのですが、 alertをコメントアウトするとうまくいきません。 以上の点、アドバイス等お願いします。 <html> <head> <title></title> <script type="text/javascript"> function changeColor(){ var targetTable = document.getElementById('colorchange'); var targetTr = targetTable.rows[0]; var tdLen = targetTr.cells.length; for(var i = 0 ; i < tdLen ; i++ ){ if( i==0 ){ targetTr.cells[0].style.backgroundColor='red'; }else{ targetTr.cells[i-1].style.backgroundColor='white'; targetTr.cells[i].style.backgroundColor='red'; } wait( 300 ); //このalertを消すとうまくいかない alert('test'); } } function wait( timeWait ) { var timeStart = new Date().getTime(); var timeNow = new Date().getTime(); while( timeNow < (timeStart + timeWait ) ) { timeNow = new Date().getTime(); } } </script> </head> <body> <table border="1" id="colorchange"> <tr> <td>1111</td> <td>2222</td> <td>3333</td> <td>4444</td> </tr> </table> <button onClick="changeColor()">スタート</button> </body> </html>

  • 画像をランダムな座標に一定の時間で表示する方法

    javascript勉強中の65歳の初心者です 画像を乱数で得た座標に一定の時間で表示したいと次の通り試行錯誤していますが、どうも最初の1個は表示されますが配列の2番目以降表示されません。 初歩的な質問で恐縮ですがご指導お願いします。 <html> <head> <title>テスト表示</title> </head> <body onload= "set()"> <script language="JavaScript"><!-- sx = new Array(); sy = new Array(); num = 20; var timer; var n; var i; var m; n = 0; function set(){ for (m=0; m<num; m++) { sx[m] = Math.floor(Math.random()*800); sy[m] = Math.floor(Math.random()*600); } setInterval("uncohyouji()", 2000); } function uncohyouji(){ styl = "<img src='unco1.gif'style='position:absolute;"; document.write(styl+sx[n]+"px;left:"+sy[n]+"px;' name='unco1"+n+"'>"); n++; }

  • 複数のイベントリスナーを設置するのは正しい？

    クリック時、マウスオーバー時、マウスアウト時の処理を作るとき、 イベントリスナーの使い方はこのようなやり方でよいでしょうか。 var d = document.getElement.ById("id"); d.addEventListener('click', function(e){ var tar=e.target; tar.style.backgroundColor ="#000000"; },false); d.addEventListener('mouseover', function(e){ var tar=e.target; tar.style.backgroundColor ="#aaaaaa"; },false); d.addEventListener('mouseout', function(e){ var tar=e.target; tar.style.backgroundColor ="#555555"; },false);

  • 複数の<iframe>内にHTMLをランダム表示

    以下のようなソースで、ランダムにHTMLをIFRAMEに読み込むソースを書いています。 （Javascript） window.onload = function(){ var c = 23; //ランダムに表示するiframe内URLの数 var ifm = document.getElementById('aaa');//frameIDを入力 var r = Math.floor( Math.random() * c ); var urls = new Array(); urls[0] = '../text/1.html'; urls[1] = '../text/2.html'; urls[2] = '../text/3.html'; urls[3] = '../text/4.html'; urls[4] = '../text/5.html'; urls[5] = '../text/6.html'; urls[6] = '../text/7.html'; urls[7] = '../text/8.html'; urls[8] = '../text/9.html'; urls[9] = '../text/10.html'; ifm.src = urls[r]; } （HTML） <iframe src="#" id="aaa" frameborder="0" marginwidth="0" width="115" marginheight="0" scrolling="no"></iframe> このような要領で、 id="aaa"にはtextフォルダ内のファイル1.html～10.htmlのうちからランダムで、 id="bbb"にはtextフォルダ内のファイル11.html～20.htmlのうちからランダムで、 id="ccc"にはtextフォルダ内のファイル21.html～30.htmlのうちからランダムで、 ・・・・ といった感じで以下のようなソースでそれぞれ読み込めればと思っているのですが、どうやったら可能でしょうか？ <iframe src="#" id="aaa" frameborder="0" marginwidth="0" width="115" marginheight="0" scrolling="no"></iframe> <iframe src="#" id="bbb" frameborder="0" marginwidth="0" width="115" marginheight="0" scrolling="no"></iframe> <iframe src="#" id="ccc" frameborder="0" marginwidth="0" width="115" marginheight="0" scrolling="no"></iframe> javascriptにかんしてはあまり詳しくありませんので、ちょっと改変してコピペするくらいまでのソースを教えていただけませんでしょうか？ よろしくおねがいします。

  • altだけランダムに並び替えできません。

    はじめまして、お力をお貸しください。 ３個のバナー（今後増減あり）をリロードするたびにランダムで 順番を入れ替えて表示したいと思っています。重複ナシです。 ３個中３個すべてを表示して順番だけ入れ替えたいです。 上記に(1)画像(2)リンク(3)altの３点セットをランダム順番入れ替え したいのですが、下記スクリプトだとaltだけ順番が入れ替わりません。 altも順番入れ替えできる用にしてもらえませんでしょうか。 お願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <title>バナーランダム順番入れ替え</title> <script type="text/javascript"> <!-- function bannerclass(address,src){ this.src = src; this.address = address; } function getBannerAddress(){ var i = 0; var tempAddressList = new Array(); while(document.getElementById('banner' + i)){ tempAddressList[i] = new bannerclass(document.getElementById('banner' + i).parentNode.href,document.getElementById('banner' + i).src); i++; } return tempAddressList; } function setBannerAddress(tempBannerData){ var bannernum = tempBannerData.length; var i; for (i = 0; i < bannernum; i++){ var rndNum = Math.floor(Math.random() * bannernum); var tempData = tempBannerData[rndNum]; tempBannerData[rndNum] = tempBannerData[i]; tempBannerData[i] = tempData; } for (i = 0; i < bannernum; i++){ document.getElementById('banner' + i).parentNode.href = tempBannerData[i].address; document.getElementById('banner' + i).src = tempBannerData[i].src; } } function setBanner(){ var tempdata = getBannerAddress(); setBannerAddress(tempdata); } if (window.addEventListener) window.addEventListener("load", setBanner, false); else if (window.attachEvent) window.attachEvent("onload", setBanner); else window.onload = setBanner; // --> </script> </head> <body> <p> <a href="address1.html"><img src="001.gif" id="banner0" alt="banner1"></a> </p> <p> <a href="address2.html"><img src="002.gif" id="banner1" alt="banner2"></a> </p> <p> <a href="address3.html"><img src="003.gif" id="banner2" alt="banner3"></a> </p> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する