JavaScriptで流れる文字

JavaScriptで流れる文字

ティッカー 流れる文字
つhttp://javascript123.seesaa.net/article/11068130 …
このサイトのJavaScriptを借りているんですが、

list[0]="Message1";
list[1]="Message2";
list[2]="Message3";

というように順番に表示されてしまいます。
これをランダムにしたいのですがJavaScriptについては素人なのでうまくいきません。
どのようにすればランダムな順番で表示されるようになるのでしょうか。

また、出来れば同じメッセージが続けて表示されないように工夫したいです。
たとえば、list[1]の後にはlist[1]以外のメッセージが流れるように。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2010/09/06 18:30

メッセージ（配列）から表示するものの選択を変数iで行なっており、次に表示するものはi++（1つ足す）となっているので、この部分をランダムになるようにすればよいですが、メッセージが3種類程度だとたいして変わりがないと思います。

//i++;
//if(i==list.length){i=0;}
if (list.length>1) {
　j = i;
　while (j==i) i = Math.random() * list.length | 0;
}
最初に表示するものもランダムにするのなら、初期設定のi=0の部分もランダムに。


…というわけで、こんな感じ？
（他の部分はそのままにしてあります。）

window.onload = scrMsg;
var cnt = 0;
var stpX = 10; //停止座標
var stpTime = 200; //停止時間
var posLeft = 600; //開始座標
//var i = 0; //配列変数
var i, j;
var list = new Array(); //配列 スクロールさせる文字列
list[0]="このスクリプトは、流れる文字,ティッカーを実行します。";
list[1]="文字のスクロールはMARQUEE を使うと簡単にできるのですが、動きがぎこちない？？";
list[2]="このスクリプトでは,スムーズに流れる文字を実現しています。";
i = Math.random() * list.length | 0;

function scrMsg(){
document.getElementById('msgBx').innerHTML = msgTxt();
cnt++;
if(cnt > stpTime){
cnt = 0;
//i++;
//if(i==list.length){i=0;}
if (list.length>1) {
j = i;
while (j==i) i = Math.random() * list.length | 0;
}
}
setTimeout("scrMsg()",20);
}

function msgTxt() {
var drift = "";
var speed = 15; //テキストの流れる速さ
var posX = posLeft-cnt*speed; //テキストの X座標

if (posX < stpX){ posX = stpX;} //スクロール停止
{drift = '<div style="position:absolute;left:' + posX +'">' + list[i] + "</div>";
return drift;}
}

この回答へのお礼

コピペして動かしてみると、願っていたとおりに動いてくれました！
ありがとうございました。
それと、メッセージの数は増やせるようなので１０個ほどにしてあります。
たまに同じものが流れてくる程度ですので気になりませんでした。

お礼日時：2010/09/06 23:00

No.3 回答者： yyr446 回答日時： 2010/09/06 19:11

No.1です。

よく見ると、
list.shuffle();のいれ場所間違えてました。
if(i==list.length){i=0;}に入れないとだめですね。
function scrMsg(){
document.getElementById('msgBx').innerHTML = msgTxt();
cnt++;
if(cnt > stpTime){
cnt = 0;
i++;
if(i==list.length){i=0;list.shuffle();}
}
setTimeout("scrMsg()",20);
}

それから、
drift = '<div style="position:absolute;left:' + posX +'px">' + list[i] + "</div>"
と単位 'px'も付けないと、IEじゃない人が不幸になります。

この回答へのお礼

たしかに同じものを連続させないようにするとランダムじゃなくなりますね（笑）
でもどうにかなりました、ありがとうございます。

お礼日時：2010/09/06 23:01

No.1 回答者： yyr446 回答日時： 2010/09/06 18:19

毎回にlistの配列をシャッフルしてやればよいと思う。

Array.prototype.shuffle = function() {
var i = this.length;
while(i){
var j = Math.floor(Math.random()*i);
var t = this[--i];
this[i] = this[j];
this[j] = t;
}
return this;
}
を定義しておけば、
list.shuffle()
で、シャッフルできます。
これを、function scrMsg()
の先頭にででも、いれとけばよし。

同じメッセージが続けて表示されないように工夫したいです。
＝＞それってランダムじゃなくなるんじゃ無い！

この回答へのお礼

ありがとうございます。

お礼日時：2010/09/06 23:00