解決済みの質問
JavaScriptで流れる文字
ティッカー 流れる文字
つhttp://javascript123.seesaa.net/article/110681301.html
このサイトのJavaScriptを借りているんですが、
list[0]="Message1";
list[1]="Message2";
list[2]="Message3";
というように順番に表示されてしまいます。
これをランダムにしたいのですがJavaScriptについては素人なのでうまくいきません。
どのようにすればランダムな順番で表示されるようになるのでしょうか。
また、出来れば同じメッセージが続けて表示されないように工夫したいです。
たとえば、list[1]の後にはlist[1]以外のメッセージが流れるように。
投稿日時 - 2010-09-06 18:04:09
メッセージ(配列)から表示するものの選択を変数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 18:30:05
お礼
コピペして動かしてみると、願っていたとおりに動いてくれました!
ありがとうございました。
それと、メッセージの数は増やせるようなので10個ほどにしてあります。
たまに同じものが流れてくる程度ですので気になりませんでした。
投稿日時 - 2010-09-06 23:00:27
6人が「このQ&Aが役に立った」と投票しています
ベストアンサー以外の回答(2件中 1~2件目)
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 19:11:44
お礼
たしかに同じものを連続させないようにするとランダムじゃなくなりますね(笑)
でもどうにかなりました、ありがとうございます。
投稿日時 - 2010-09-06 23:01:57
毎回に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 18:19:55
お礼
ありがとうございます。
投稿日時 - 2010-09-06 23:00:45
OKWaveのオススメ
おすすめリンク