使用する2つのスタイル

Question

Hellowみんな、私はテーブルの行をハイライト表示するには、以下のコードを使用してい

。マーキーエフェクト（つまり、テキストを左から右に移動する）を追加することが可能かどうかは、つまり、同じ行のテキストを移動することが可能かどうかを疑問に思っていました。たとえば、現在の時刻が12:45であるとすると、クラスra1が選択され、赤いbckgroundがあります。同時に、同じアクティブ行にマーキーエフェクトを追加すると、45分後に別の行、つまりクラスraa3がアクティブになり、赤い背景になります。私は現在この行のマーキーエフェクト、つまり現在選択されアクティブなクラスra3を使用したいと考えています。

function openCity(evt, cityName, today) { 
 
    var i, tabcontent, tablinks; 
 
    tabcontent = 
 
    document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
    tabcontent[i].style.display = "none"; 
 
    } 
 
    tablinks = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
    tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
    } 
 
    document.getElementById(cityName).style.display = "block"; 
 
    if (typeof today == 'undefined') { 
 
    evt.currentTarget.className += " active"; 
 
    } else { 
 
    tablinks[today].className += " active"; 
 
    } 
 
} 
 

 
let now = new Date().getHours() * 100 + new 
 
Date().getMinutes(); 
 
let times = [45, 100, 145]; 
 
let classes = ['ra1', 'ra3', ]; 
 
let selected = classes[times.reduce((acc, curr, idx) => now >= 
 
    curr ? idx : acc)]; 
 
if (selected){ 
 
    var elements = document.getElementsByClassName(selected); 
 
    for(var i=0;i<elements.length; i++) 
 
     elements[i].style.background = 'red'; 
 
}

.tabcontent { display: none }

<div class="tab" style="margin-top: 1.6%; "> 
 
    <button class="tablinks" onclick="openCity(event, 'Sun0') ">Sun</button> 
 
    <button class="tablinks" onclick="openCity(event, 'Mon0')">Mon</button> 
 

 
</div> 
 

 
<div id="Sun0" class="tabcontent" id="np"> 
 

 

 
    <div style="overflow-x:auto;"> 
 
    <table> 
 
     <col width="65%"> 
 
     <col width="35%"> 
 
     <tr> 
 
     <th>Class</th> 
 
     <th>Time</th> 
 
     </tr> 
 

 
     <tr> 
 
     <td class="ra1">10:15-11:00AM</td> 
 
     <td style="background:black; color:Yellow;">It is Sunday </td> 
 

 
     </tr> 
 
     <tr> 
 
     <td class="ra3">11:00-11:45AM</td> 
 
     <td style="background:black; color:Yellow;">It is Sunday</td> 
 

 
     </tr> 
 
    </table> 
 
    </div> 
 
</div> 
 

 

 
<div id="Mon0" class="tabcontent"> 
 

 
    <!--Monnday--> 
 
    <div style="overflow-x:auto;"> 
 
    <table> 
 
     <col width="65%"> 
 
     <col width="35%"> 
 
     <tr> 
 
     <th>Class</th> 
 
     <th>Time</th> 
 
     </tr> 
 

 
     <tr> 
 
     <td class="ra1">10:15-11:00AM</td> 
 
     <td style="background:black; color:Yellow;">It is Monday</td> 
 

 
     </tr> 
 
     <tr> 
 
     <td class="ra3">11:00-11:45AM</td> 
 
     <td style="background:black; color:Yellow;">It is Monday</td> 
 

 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

Answer 1

あなたはinnerHTMLを使用して、選択したdivの内側のすべてを取得することができ、その後、あなたはelements[i].innerHTML = "<marquee>" + elements[i].innerHTML + "</marquee>"

function openCity(evt, cityName, today) { 
 
    var i, tabcontent, tablinks; 
 
    tabcontent = 
 
    document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
    tabcontent[i].style.display = "none"; 
 
    } 
 
    tablinks = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
    tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
    } 
 
    document.getElementById(cityName).style.display = "block"; 
 
    if (typeof today == 'undefined') { 
 
    evt.currentTarget.className += " active"; 
 
    } else { 
 
    tablinks[today].className += " active"; 
 
    } 
 
} 
 

 
let now = new Date().getHours() * 100 + new 
 
Date().getMinutes(); 
 
let times = [45, 100, 145]; 
 
let classes = ['ra1', 'ra3', ]; 
 
let selected = classes[times.reduce((acc, curr, idx) => now >= 
 
    curr ? idx : acc)]; 
 
if (selected){ 
 
    var elements = document.getElementsByClassName(selected); 
 
    for(var i=0;i<elements.length; i++){ 
 
     elements[i].style.background = 'red'; 
 
     elements[i].innerHTML = "<marquee>" + elements[i].innerHTML + "</marquee>"; 
 
} 
 
}

.tabcontent { display: none }

<div class="tab" style="margin-top: 1.6%; "> 
 
    <button class="tablinks" onclick="openCity(event, 'Sun0') ">Sun</button> 
 
    <button class="tablinks" onclick="openCity(event, 'Mon0')">Mon</button> 
 

 
</div> 
 

 
<div id="Sun0" class="tabcontent" id="np"> 
 

 

 
    <div style="overflow-x:auto;"> 
 
    <table> 
 
     <col width="65%"> 
 
     <col width="35%"> 
 
     <tr> 
 
     <th>Class</th> 
 
     <th>Time</th> 
 
     </tr> 
 

 
     <tr> 
 
     <td class="ra1">10:15-11:00AM</td> 
 
     <td style="background:black; color:Yellow;">It is Sunday </td> 
 

 
     </tr> 
 
     <tr> 
 
     <td class="ra3">11:00-11:45AM</td> 
 
     <td style="background:black; color:Yellow;">It is Sunday</td> 
 

 
     </tr> 
 
    </table> 
 
    </div> 
 
</div> 
 

 

 
<div id="Mon0" class="tabcontent"> 
 

 
    <!--Monnday--> 
 
    <div style="overflow-x:auto;"> 
 
    <table> 
 
     <col width="65%"> 
 
     <col width="35%"> 
 
     <tr> 
 
     <th>Class</th> 
 
     <th>Time</th> 
 
     </tr> 
 

 
     <tr> 
 
     <td class="ra1">10:15-11:00AM</td> 
 
     <td style="background:black; color:Yellow;">It is Monday</td> 
 

 
     </tr> 
 
     <tr> 
 
     <td class="ra3">11:00-11:45AM</td> 
 
     <td style="background:black; color:Yellow;">It is Monday</td> 
 

 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>