23362


下記のソースコードは、marqueeで動いている文字の方向に応じて、その『方向指示ボタン』の  
矢印を"赤"に，反対側の矢印を"白"になるように設定したものです。  
この動いている方向の矢印を"赤"で示すのでなく、"点滅"で示すようにするには、どのように  
書き換えればいいでしょうか。ご教示ください。

[code]

    <SCRIPT>
    
     function marLeft(){
       document.getElementById("blinkL").style.color="red";
       document.getElementById("blinkR").style.color="white";
     }
     function marRight(){
       document.getElementById("blinkR").style.color="red";
       document.getElementById("blinkL").style.color="white";
     }
    
    
           flg=false;
              function Stop_Start(){
                 flg = !flg;
                    document.myForm.stopStart.value=flg?"START":"STOP";
       if(flg) {
                    document.getElementById("myMarquee").stop();
        } else {
                    document.getElementById("myMarquee").start();
        }
     }
    </script>
    
    
        <marquee id="myMarquee">ＴＴＴＴＴ</marquee>
         <br><br>
        <form id="marFunction" name="myForm" style="text-align:center;">
          <INPUT id="blinkL" type="button" style="color:red; background: black;" onclick="myMarquee.direction='left'; marLeft();" value="←"> 
           ☆
          <input type="button" name="stopStart" value=" STOP " onClick="Stop_Start()">
           ☆
          <INPUT id="blinkR" type="button" style="color:white; background: black;" onclick="myMarquee.direction='right'; marRight();" value="→"> 
        </form>
    
[/code]


CC BY-SA 3.0
2016-03-20T05:03:43.507
23291
2019-12-13T19:27:05.827
2016-03-20T14:42:38.410
9359
9359
question
javascript html
marqueeで動いている文字の方向に応じて、その『方向指示ボタン』の矢印を、"点滅"で示すようにするには


専門的には分かりませんが、一応以下のようにすれば機能します。  
ただ、"stop"と"start"を切り替える『トグルボタン』ではうまくいきませんので、  
普通の『ストップ』ボタンにしました。  
また、矢印のボタンを連打すると、その連打した回数だけ反対側の矢印のボタンを  
押さないと、正常な状態に戻らない点が難点です。

[code]

    <html>
     <head>
       <title>ボタンのラベルを点滅させます</title>
    
     <script language="JavaScript">
     <!--
    
       msgA = new Array();
       msgA[0] = "←";
       msgA[1] = "\u0020\u0020\u0020";
       numA = 0;
     var tmr1ID;
    
         function blinkmsg1(){ //ボタンのラベル（文字）を点滅させます。
               document.getElementById("mybotan2").value ="→";
               clearTimeout(tmr2ID);
               document.getElementById("mybotan1").value = msgA[numA];
               numA ^= 1;
               tmr1ID = setTimeout('blinkmsg1()',1000);
               document.getElementById("mybotan1").style.color="red";
               document.getElementById("mybotan2").style.color="white";
               myMarquee.direction='left';                 
               document.getElementById("myMarquee").start();
            }
    
       msgB = new Array();
       msgB[0] = "→";
       msgB[1] = "\u0020\u0020\u0020";
       numB = 0;
     var tmr2ID;
    
         function blinkmsg2(){ //ボタンのラベル（文字）を点滅させます。
               document.getElementById("mybotan1").value ="←";
               clearTimeout(tmr1ID);
               document.getElementById("mybotan2").value = msgB[numB];
               numB ^= 1;
               tmr2ID = setTimeout('blinkmsg2()',1000);
               document.getElementById("mybotan1").style.color="white";
               document.getElementById("mybotan2").style.color="red";
               myMarquee.direction='right';
               document.getElementById("myMarquee").start();
           }
    
              function stopMarquee(){
               document.getElementById("mybotan1").disabled=false;
               document.getElementById("mybotan2").disabled=false;
               clearTimeout(tmr1ID);
               clearTimeout(tmr2ID);
               document.getElementById("mybotan1").value ="←";
               document.getElementById("mybotan2").value ="→";
               document.getElementById("mybotan1").style.color="white";
               document.getElementById("mybotan2").style.color="white";
               document.getElementById("myMarquee").stop();
           }
     //-->
     </script>
     </head>
    
     <body>
       <marquee id="myMarquee">ttttt</marquee>
    
       <form name="myForm" style="text-align:center;">
        <input name="blinkA" type="button" id="mybotan1" value="←" onclick="blinkmsg1();"
           style="color:white; font-weight:bold; background:black; text-align : center;">
        <input type="button" name="stop" value=" STOP " onClick="stopMarquee()">
        <input name="blinkB"  type="button" id="mybotan2" value="→" onclick="blinkmsg2();"
           style="color:white; font-weight:bold; background:black; text-align : center;">
       </form>
    
     <script language="JavaScript">
     <!--
    　　setTimeout('blinkmsg1()',1000);
     //-->
     </script>
    
       </body>
     </html>
    
[/code]


CC BY-SA 3.0
2016-03-21T02:44:51.167
23312
2016-03-22T15:04:09.167
2016-03-22T15:04:09.167
9359
9359
23291
answer


要は、質問は「文字を点滅させるにはどうしたらよいか」になると思います。いろいろと方法があり、user9359
さん自身の回答「JavaScriptのタイマーで何とかする」はその一つです。

別解は、

  * 画像ボタンにしてアニメーション GIF で点滅させる
  * CSS Animation を使う

などあると思います。後者の例です: <https://jsfiddle.net/68zfn8t1/>

[code]

    function marLeft() {
      document.getElementById("blinkL").classList.add("BLINK");
      document.getElementById("blinkR").classList.remove("BLINK");
    }
    
    function marRight() {
      document.getElementById("blinkR").classList.add("BLINK");
      document.getElementById("blinkL").classList.remove("BLINK");
    }
    
    var flg = false;
    
    function Stop_Start() {
      flg = !flg;
      document.myForm.stopStart.value = flg ? "START" : "STOP";
      if (flg) {
        document.getElementById("myMarquee").stop();
      } else {
        document.getElementById("myMarquee").start();
      }
    }
[/code]

[code]

    .DIRECTION {
      color: white;
      background: black;
    }
    
    .BLINK {
      animation: blink 1s step-end infinite normal;
    }
    
    @keyframes blink {
      0% {
        color: red;
      }
      50% {
        color: transparent;
      }
    }
[/code]

[code]

    <marquee id="myMarquee">ＴＴＴＴＴ</marquee>
    <br><br>
    <form id="marFunction" name="myForm" style="text-align:center;">
      <input id="blinkL" type="button" class="DIRECTION BLINK" onclick="myMarquee.direction='left'; marLeft();" value="←"> ☆
      <input type="button" name="stopStart" value=" STOP " onClick="Stop_Start()"> ☆
      <input id="blinkR" type="button" class="DIRECTION" onclick="myMarquee.direction='right'; marRight();" value="→">
    </form>
[/code]


CC BY-SA 4.0
2016-03-23T01:57:20.390
23362
2019-12-13T19:27:05.827
2019-12-13T19:27:05.827
32986
3475
23291
answer


"stop"と"start"を切り替える『トグルボタン』でも、うまく行きました。  
なお、スタートさせるには、『方向指示ボタン』で方向を決めて点滅させてから  
『START』を押さないと、機能しません。

[code]

    <html>
     <head>
       <title>ボタンのラベルを点滅させます</title>
    
     <script language="JavaScript">
     <!--
    
       msgA = new Array();
       msgA[0] = "←";
       msgA[1] = "\u0020\u0020\u0020";
       numA = 0;
     var tmr1ID;
    
         function blinkmsg1(){ //ボタンのラベル（文字）を点滅させます。
               document.getElementById("stop_start").disabled=false;
               document.getElementById("mybotan1").disabled=true;
               document.getElementById("mybotan2").disabled=false;
               document.getElementById("mybotan2").value ="→";
               clearTimeout(tmr2ID);
               document.getElementById("mybotan1").value = msgA[numA];
               numA ^= 1;
               tmr1ID = setTimeout('blinkmsg1()',1000);
               document.getElementById("mybotan1").style.color="red";
               document.getElementById("mybotan2").style.color="white";
               myMarquee.direction='left';
    }
       msgB = new Array();
       msgB[0] = "→";
       msgB[1] = "\u0020\u0020\u0020";
       numB = 0;
     var tmr2ID;
    
         function blinkmsg2(){ //ボタンのラベル（文字）を点滅させます。
               document.getElementById("stop_start").disabled=false;
               document.getElementById("mybotan1").disabled=false;
               document.getElementById("mybotan2").disabled=true;
               document.getElementById("mybotan1").value ="←";
               clearTimeout(tmr1ID);
               document.getElementById("mybotan2").value = msgB[numB];
               numB ^= 1;
               tmr2ID = setTimeout('blinkmsg2()',1000);
               document.getElementById("mybotan1").style.color="white";
               document.getElementById("mybotan2").style.color="red";
               myMarquee.direction='right';
    }
    
     flg=false;
        function stopMarquee(){
          flg = !flg;
             if(flg){
                     document.getElementById("mybotan1").value ="←";
                     clearTimeout(tmr1ID);
                     document.getElementById("mybotan1").style.color="white";
                     document.getElementById("mybotan2").value ="→";
                     clearTimeout(tmr2ID);
                     document.getElementById("mybotan2").style.color="white";
                     document.getElementById("mybotan1").disabled=false;
                     document.getElementById("mybotan2").disabled=false;
                     document.getElementById("stop_start").disabled=true;
                     document.getElementById("myMarquee").stop();
                     flg=true;
               }else{
                     document.getElementById("stop_start").disabled=false;
                     document.getElementById("myMarquee").start();
                     flg=false;
             }
     　　　　　　document.getElementById("stop_start").value=flg?"START":"STOP";
         }
     //-->
     </script>
     </head>
    
     <body>
       <marquee id="myMarquee">ttttt</marquee>
    <br><br>
       <form name="myForm" style="text-align:center;">
        <input name="blinkA" type="button" id="mybotan1" value="←" onclick="blinkmsg1();"
           style="color:white; font-weight:bold; background:black; text-align : center;">
        <input type="button" id="stop_start" name="" value=" STOP " onClick="stopMarquee()">
        <input name="blinkB"  type="button" id="mybotan2" value="→" onclick="blinkmsg2();"
           style="color:white; font-weight:bold; background:black; text-align : center;">
       </form>
    
     <script language="JavaScript">
     <!--
    　　setTimeout('blinkmsg1()',1000);
     //-->
     </script>
    
       </body>
     </html>
    
[/code]

ここで新たな疑問が生じました。  
スタートさせるには、『方向指示ボタン』で方向を決めて"点滅"させてから  
『START』を押さないと、機能しませんが、この停止している状態では"点滅"  
ではなくて"赤色"にし、スタートさせたら"点滅"するようにしたいのです。  
分かる方は、教えていただけませんか。


CC BY-SA 3.0
2016-03-23T09:10:34.747
23381
2016-03-24T11:56:00.927
2016-03-24T11:56:00.927
9359
9359
23291
answer