QA@IT
«回答へ戻る

追加回答です。

26
  </html>
 
 ```
+animationスタイルでもできるそうです。
+下記のソースコードで、上記と同じようになります。
+
+```ここに言語を入力
+<style>
+.DIRECTION {
+  color: white;
+  background: black;
+}
+
+.BLINK {
+  animation: blink 1s step-end infinite normal;
+}
+@keyframes blink {
+  0% { color: red; }
+  50% { color: transparent; }
+}
+</style>
+
+<script>
+function marLeft() {
+  document.getElementById("stopStart").disabled=false;
+  document.getElementById("blinkL").classList.add("BLINK");
+  document.getElementById("blinkR").classList.remove("BLINK");
+}
+
+function marRight() {
+  document.getElementById("stopStart").disabled=false;
+  document.getElementById("blinkR").classList.add("BLINK");
+  document.getElementById("blinkL").classList.remove("BLINK");
+}
+
+ flg=false;
+    function Stop_Start(){
+      flg = !flg;
+         if(flg){
+                 document.getElementById("blinkL").classList.remove("BLINK");
+                 document.getElementById("blinkR").classList.remove("BLINK");
+                 document.getElementById("stopStart").disabled=true;
+                 document.getElementById("myMarquee").stop();
+                 flg=true;             
+           }else{
+                 document.getElementById("stopStart").disabled=false;
+                 document.getElementById("myMarquee").start();
+                 flg=false;           
+         }
+       document.getElementById("stopStart").value=flg?"START":"STOP";
+     }
+</script>
+
+<marquee id="myMarquee">TTTTT</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 id="stopStart" type="button" name="stopStart" value=" STOP " onClick="Stop_Start()">
+       ☆
+  <input id="blinkR" type="button" class="DIRECTION" onclick="myMarquee.direction='right'; marRight();" value="→"> 
+</form>
+
+```

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

<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>

animationスタイルでもできるそうです。
下記のソースコードで、上記と同じようになります。

<style>
.DIRECTION {
  color: white;
  background: black;
}

.BLINK {
  animation: blink 1s step-end infinite normal;
}
@keyframes blink {
  0% { color: red; }
  50% { color: transparent; }
}
</style>

<script>
function marLeft() {
  document.getElementById("stopStart").disabled=false;
  document.getElementById("blinkL").classList.add("BLINK");
  document.getElementById("blinkR").classList.remove("BLINK");
}

function marRight() {
  document.getElementById("stopStart").disabled=false;
  document.getElementById("blinkR").classList.add("BLINK");
  document.getElementById("blinkL").classList.remove("BLINK");
}

 flg=false;
    function Stop_Start(){
      flg = !flg;
         if(flg){
                 document.getElementById("blinkL").classList.remove("BLINK");
                 document.getElementById("blinkR").classList.remove("BLINK");
                 document.getElementById("stopStart").disabled=true;
                 document.getElementById("myMarquee").stop();
                 flg=true;             
           }else{
                 document.getElementById("stopStart").disabled=false;
                 document.getElementById("myMarquee").start();
                 flg=false;           
         }
       document.getElementById("stopStart").value=flg?"START":"STOP";
     }
</script>

<marquee id="myMarquee">TTTTT</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 id="stopStart" type="button" name="stopStart" value=" STOP " onClick="Stop_Start()">
       ☆
  <input id="blinkR" type="button" class="DIRECTION" onclick="myMarquee.direction='right'; marRight();" value="→"> 
</form>

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

```ここに言語を入力
<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>

```
animationスタイルでもできるそうです。
下記のソースコードで、上記と同じようになります。

```ここに言語を入力
<style>
.DIRECTION {
  color: white;
  background: black;
}

.BLINK {
  animation: blink 1s step-end infinite normal;
}
@keyframes blink {
  0% { color: red; }
  50% { color: transparent; }
}
</style>

<script>
function marLeft() {
  document.getElementById("stopStart").disabled=false;
  document.getElementById("blinkL").classList.add("BLINK");
  document.getElementById("blinkR").classList.remove("BLINK");
}

function marRight() {
  document.getElementById("stopStart").disabled=false;
  document.getElementById("blinkR").classList.add("BLINK");
  document.getElementById("blinkL").classList.remove("BLINK");
}

 flg=false;
    function Stop_Start(){
      flg = !flg;
         if(flg){
                 document.getElementById("blinkL").classList.remove("BLINK");
                 document.getElementById("blinkR").classList.remove("BLINK");
                 document.getElementById("stopStart").disabled=true;
                 document.getElementById("myMarquee").stop();
                 flg=true;             
           }else{
                 document.getElementById("stopStart").disabled=false;
                 document.getElementById("myMarquee").start();
                 flg=false;           
         }
       document.getElementById("stopStart").value=flg?"START":"STOP";
     }
</script>

<marquee id="myMarquee">TTTTT</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 id="stopStart" type="button" name="stopStart" value=" STOP " onClick="Stop_Start()">
       ☆
  <input id="blinkR" type="button" class="DIRECTION" onclick="myMarquee.direction='right'; marRight();" value="→"> 
</form>

```

回答を投稿

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

<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>

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

```ここに言語を入力
<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>

```