QA@IT

初回のみにしかif~elseによる文字列の切り替えが、反映されない現象を解決するには

4975 PV

下記のコードーは、1分ごとに英語と日本語が切り替わり、英語表記は月曜日にだけ色(赤),日本語表記は
月曜日にだけ色(青)を付けようと試みたのですが、最初の表示だけしかきちんと表示さず、1分後に切り替わると、
それ以降はif~elseの表示が合併されて表示されます。どのように書けば、きちんと表示されるでしょうか。
問題箇所は、スクリプトのdrag = function(){}内の以下の部分です。

if( mt%2==0 ){

for (var d, i = n; i > -1; --i)
{
  }
}

else{

for (var d, i = n; i > -1; --i)
{
  }
}

コード全体

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>文字マウスストーカー</title>


<style type="text/css">

.sun{color: red;}

/* Circle Text Styles */
#myText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: gold;

position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#myText div {position: relative;}
#myText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>

<script type="text/javascript">
<!--

;(function(){

var date = new Date();
var mt = date.getMinutes();

if( mt%2==0 ){

var m = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    d = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var date = new Date(),
    day = ("0" + date.getDate()).slice(-2),
    year = date.getYear() + 1900,
    week = d[date.getDay()];

if((day == 1)||(day == 21)||(day == 31)){
day=day+ "st";
}
else if((day == 2)||(day == 22)){
day=day+ "nd";
}
else if((day == 3)||(day == 23)){
day=day+ "rd";
}
else{
day=day+ "th";
}

var    msg =  week + " "+  day + " " + m[date.getMonth()] + " " + year + " " + "★" + "★" + "★" + "★" + " ";

}

else{

var    d = new Array("日", "月", "火", "水", "木", "金", "土");
var    date = new Date(),
       month = ('0'+(date.getMonth() + 1)).slice(-2), 
       day = ("0" + date.getDate()).slice(-2),
       year = date.getYear() + 1900,
       week = d[date.getDay()];

var    msg = year + "年" +" " + month + "月" + day + "日" + " " + week + "曜日"+ " " + "★" + "★" + "★" + "★" + " ";

}

var size = 24;

var circleY = 0.75; var circleX = 2;

var letter_spacing = 5;

var diameter = 10;

var rotation = 0.4;
var speed = 0.3;


if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
 e = e || window.event;
 ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
 xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
 if(init.nopy){
  o.style.top = (b || document.body).scrollTop + 'px';
  o.style.left = (b || document.body).scrollLeft + 'px';
 };
 currStep -= rotation;
 for (var d, i = n; i > -1; --i){ // makes the circle
  d = document.getElementById('iemsg' + i).style;
  d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
  d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
 };
},

drag = function(){ // makes the resistance

var date = new Date();
var mt = date.getMinutes();

if( mt%2==0 ){

var m = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    d = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var date = new Date(),
    day = ("0" + date.getDate()).slice(-2),
    year = date.getYear() + 1900,
    week = d[date.getDay()];

if((day == 1)||(day == 21)||(day == 31)){
day=day+ "st";
}
else if((day == 2)||(day == 22)){
day=day+ "nd";
}
else if((day == 3)||(day == 23)){
day=day+ "rd";
}
else{
day=day+ "th";
}

        for (var d, i = n; i > -1; --i) {

            var elm = document.getElementById('iemsg' + i);
            elm.innerHTML = msg[i];

         if (week == d[3]) {

            if ((i >= 0) && (i < 3)) {

                    elm.style.color = "red";

                }
            }
        }

var    t =  week + " "+  day + " " + m[date.getMonth()] + " " + year + " " + "★" + "★" + "★" + "★" + " ";

}

else{

var    d = new Array("日", "月", "火", "水", "木", "金", "土");
var    date = new Date(),
       month = ('0'+(date.getMonth() + 1)).slice(-2), 
       day = ("0" + date.getDate()).slice(-2),
       year = date.getYear() + 1900,
       week = d[date.getDay()];

        for (var d, i = n; i > -1; --i) {

            var elm = document.getElementById('iemsg' + i);
            elm.innerHTML = msg[i];

         if (week == d[3]) {

            if ((i > 12) && (i < 16)) {

                    elm.style.color = "lightblue";

                }
            }
        }

var    t = year + "年" +" " + month + "月" + day + "日" + " " + week + "曜日"+ " " + "★" + "★" + "★" + "★" + " ";

} 

   var currentLength = msg.length;

    // 状態の変更
    msg = t.split('');
    n = msg.length - 1;

    // 文字要素の変更
    for (var i = Math.max(currentLength, msg.length) - 1; i > -1; --i)
    {
        var d = i < currentLength ? document.getElementById('iemsg' + i) : null;
        if (d)
        {
            if (i < t.length)
            {
                // 既存要素の内容変更
                d.innerHTML = msg[i];
            }
            else
            {
                // 不要になった要素の削除
                d.parentElement.removeChild(d);
            }
        }
        else
        {
            // 不足要素の追加
            d = document.createElement('div');
            d.id = 'iemsg' + i;
            d.style.height = d.style.width = a + 'px';
            d.appendChild(document.createTextNode(msg[i]));
            oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
    }
};

 y[0] = Y[0] += (ymouse - Y[0]) * speed;
 x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
 for (var i = n; i > 0; --i){
  y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
  x[i] = X[i] += (x[i-1] - X[i]) * speed;
 };
 makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
 if(!isNaN(window.pageYOffset)){
  ymouse += window.pageYOffset;
  xmouse += window.pageXOffset;
 } else init.nopy = true;
 for (var d, i = n; i > -1; --i){
  d = document.createElement('div'); d.id = 'iemsg' + i;
  d.style.height = d.style.width = a + 'px';
  d.appendChild(document.createTextNode(msg[i]));
  oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
 };
 o.appendChild(oi); document.body.appendChild(o);
 setInterval(drag, 25);
},

ascroll = function(){
 ymouse += window.pageYOffset;
 xmouse += window.pageXOffset;
 window.removeEventListener('scroll', ascroll, false);
};

o.id = 'myText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
 window.addEventListener('load', init, false);
 document.addEventListener('mouseover', mouse, false);
 document.addEventListener('mousemove', mouse, false);
  if (/Apple/.test(navigator.vendor))
   window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
 window.attachEvent('onload', init);
 document.attachEvent('onmousemove', mouse);
};
})();

// -->
</script>

</head>

<body bgcolor="black">

</body>
</html>

回答

色設定の前にスタイルを空にしてみてください。

    if (mt % 2 == 0) {

        for (var d, i = n; i > -1; --i) {

            var elm = document.getElementById('iemsg' + i);
            elm.innerHTML = msg[i];
            elm.style.color = "";           <----- Style Clear

            if ((i >= 0) && (i < 4)) {

                var d = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
                var date = new Date(),
    week = d[date.getDay()];

                if (week == d[2]) {
                    elm.style.color = "red";
                }
            }
        }
    }
    else {

        for (var d, i = n; i > -1; --i) {

            var elm = document.getElementById('iemsg' + i);
            elm.innerHTML = msg[i];
            elm.style.color = "";           <----- Style Clear

            if ((i > 12) && (i < 16)) {

                var d = new Array("日", "月", "火", "水", "木", "金", "土");
                var date = new Date(),
       week = d[date.getDay()];

                if (week == d[2]) {
                    elm.style.color = "blue";
                }
            }
        }
    }
編集 履歴 (0)
  • 回答ありがとうございました。希望通りの動きになり、頭のモヤモヤが晴れて助かりました。 -
  • 質問文は、問題箇所が重複していましたので、訂正しておきます。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。