JavaScriptで流れる文字

質問

JavaScriptで流れる文字

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

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

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

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

回答No.2

fujillin · ベストアンサー

メッセージ（配列）から表示するものの選択を変数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;}
}

お礼

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

回答No.3

yyr446

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じゃない人が不幸になります。

お礼

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

回答No.1

yyr446

毎回に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()
の先頭にででも、いれとけばよし。

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

お礼

ありがとうございます。