- ベストアンサー
背景色を一定時間ごとにランダム変化
autyの回答
- 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)) としたほうがいいでしょう。
関連する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>
- ベストアンサー
- JavaScript
- マウスを当てると、サイコロの背景色を変化するように
したいです。 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
- 背景ランダム
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>
- ベストアンサー
- JavaScript
- ランダムにページを表示するスクリプト
最近社内のホームページを作ることになった初心者です。 トップページの中に３箇所、インラインフレームを使い別のページを 表示させるというものを考えております。 その際に、インラインフレーム内に表示させるページがランダムで選ばれるように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を設定すれば上手く良くと思ったのですが、１箇所にしか表示されません；； 改善点などございましたらご教授いただけないでしょうか？
- 締切済み
- JavaScript
- 一定時間で変化する画像とリンク
業者さんにトップのページを作成してもらいました。 一定時間で画像が変化するようになっているのですが、 その画像ごとにクリックした際に違うリンクを貼りたいのですが 初心者の為、よくわかりません。 下記ソースですが どこを編集したらよいのでしょうか？ <!-- //変更秒間隔を指定 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
- 順番にセルの背景色をつけたい
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
- 画像をランダムな座標に一定の時間で表示する方法
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++; }
- ベストアンサー
- JavaScript
- 複数のイベントリスナーを設置するのは正しい？
クリック時、マウスオーバー時、マウスアウト時の処理を作るとき、 イベントリスナーの使い方はこのようなやり方でよいでしょうか。 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);
- ベストアンサー
- JavaScript
- 複数の<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にかんしてはあまり詳しくありませんので、ちょっと改変してコピペするくらいまでのソースを教えていただけませんでしょうか？ よろしくおねがいします。
- 締切済み
- 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>
- ベストアンサー
- JavaScript