プロが教える店舗＆オフィスのセキュリティ対策術

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

解決済

  • 質問者：twinhourse
  • 質問日時：
  • 回答数：5件

http://wakabano.cool.ne.jp/dream/useful/snippets …
↑のページを参考に、特定の要素の背景色を一定時間ごとにランダム変化する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から指定する場合はどうすればいいのでしょうか。
前者は全くやり方がわからなくて、後者は四苦八苦した末、ページロード時にランダムに変わるのみで、その後は変化しませでした。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： auty
  • 回答日時：

[修正]


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

No.4

  • 回答者： auty
  • 回答日時：

＜＜＜　そのソースをコピーしてテストすると時々色が取れなくて色指定エラーが出るようです。


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))
としたほうがいいでしょう。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： _pipi_
  • 回答日時：

<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>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： arexis
  • 回答日時：

そのソースをコピーしてテストすると時々色が取れなくて色指定エラーが出るようです。


色のとり方も含めて書き換えてしまいました。

複数箇所の意味が、複数箇所を同じ色で と解釈。
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() を呼び出すだけ。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： auty
  • 回答日時：

簡潔に述べさせてもらうと。



・　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
に替えればよいと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2008/04/04 22:03

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報