Saya mencoba membuat baris tabel, di mana setiap sel memiliki teks yang terlihat yang berubah warna berdasarkan hari dalam seminggu. Saya mengatur fungsi ke dalam setiap sel dengan hari dan warna yang sesuai. Sepertinya saya tidak bisa membuatnya berfungsi dengan benar. Saya tidak tahu apakah saya melewatkan sesuatu. Tolong bantu?

<tr>
  <td><script>
    function(){
      var theday = new Date().getDays();                    
      if theday == 1 {
        document.write('S').style.color = #FF0000;
      }
      else:
        document.write('S').style.color = #FFFFFF;
      }}
  </td></script>                    
</tr>

Kode saat ini:

         <tr>
            <td><script>
                Date.prototype.getWeekDay = function(){
                    var theday = new Date().getDays();                    
                    if (theday == 1) {
                        document.write('S').style.color = #FF0000;
                    }
                    else
                        document.write('S').style.color = #FFFFFF;
                    }}
            </script></td>

Saya seharusnya menyebutkan bahwa saya menggunakan Mozilla Firefox sebagai browser utama saya. Suntingan Saat Ini:

        <tr>
            <td id='sun'></td>
            <td id='mon'></td>
            <td id='tue'></td>
            <td id='wed'></td>
            <td id='thr'></td>
            <td id='fri'></td>
            <td id='sat'></td>              
        </tr>

<script>
window.onload = function(){
   var theday = new Date().getDay();  
   var color = theday == 1 ? '#FF0000' : '#FFFFFF';
   var color = theday == 2 ? '#FF7F00' : '#FFFFFF';
   var color = theday == 3 ? '#FFFF00' : '#FFFFFF';
   var color = theday == 4 ? '#00FF00' : '#FFFFFF';
   var color = theday == 5 ? '#0000FF' : '#FFFFFF';
   var color = theday == 6 ? '#2E2B5F' : '#FFFFFF';
   var color = theday == 7 ? '#8B00FF' : '#FFFFFF';
   document.getElementById('sun').style.backgroundColor = color;
   document.getElementById('mon').style.backgroundColor = color;
   document.getElementById('tue').style.backgroundColor = color;
   document.getElementById('wed').style.backgroundColor = color;
   document.getElementById('thr').style.backgroundColor = color;
   document.getElementById('fri').style.backgroundColor = color;
   document.getElementById('sat').style.backgroundColor = color;
  }
</script>

Pesan Konsol:

TypeError Tidak Tertangkap: (Tanggal baru ()). getDays bukan fungsi

Kesalahan ketik yang diperbaiki dalam kode dari .getDays > .getDay

Kode yang diperbarui:

        <tr>
            <td id='sun'>S</td>
            <td id='mon'>M</td>
            <td id='tue'>Ts</td>
            <td id='wed'>W</td>
            <td id='thr'>Th</td>
            <td id='fri'>F</td>
            <td id='sat'>S</td>             
        </tr>

<script>
window.onload = function(){
   var theday = new Date().getDay();  
   var c1 = theday == 1 ? '#FF0000' : '#FFFFFF';
   var c2 = theday == 2 ? '#FF7F00' : '#FFFFFF';
   var c3 = theday == 3 ? '#FFFF00' : '#FFFFFF';
   var c4 = theday == 4 ? '#00FF00' : '#FFFFFF';
   var c5 = theday == 5 ? '#0000FF' : '#FFFFFF';
   var c6 = theday == 6 ? '#2E2B5F' : '#FFFFFF';
   var c7 = theday == 7 ? '#8B00FF' : '#FFFFFF';
   document.getElementById('sun').style.color = c1;
   document.getElementById('mon').style.color = c2;
   document.getElementById('tue').style.color = c3;
   document.getElementById('wed').style.color = c4;
   document.getElementById('thr').style.color = c5;
   document.getElementById('fri').style.color = c6;
   document.getElementById('sat').style.color = c7;
  }
</script>

Masih belum memperbarui font seperti yang saya inginkan juga.

PEMBARUAN BARU:

        <tr>
            <td id='sun'>S</td>
            <td id='mon'>M</td>
            <td id='tue'>Ts</td>
            <td id='wed'>W</td>
            <td id='thr'>Th</td>
            <td id='fri'>F</td>
            <td id='sat'>S</td>             
        </tr>

<script>
window.onload = function(){
   var theday = new Date().getDay(); 
   var c1 = theday == 0 ? '#FF0000' : '#999999';
   var c2 = theday == 1 ? '#FF7F00' : '#999999';
   var c3 = theday == 2 ? '#FFFF00' : '#999999';
   var c4 = theday == 3 ? '#00FF00' : '#999999';
   var c5 = theday == 4 ? '#0000FF' : '#999999';
   var c6 = theday == 5 ? '#2E2B5F' : '#999999';
   var c7 = theday == 6 ? '#8B00FF' : '#999999';
   document.getElementById('sun').style.color = c1;
   document.getElementById('mon').style.color = c2;
   document.getElementById('tue').style.color = c3;
   document.getElementById('wed').style.color = c4;
   document.getElementById('thr').style.color = c5;
   document.getElementById('fri').style.color = c6;
   document.getElementById('sat').style.color = c7;
  }
</script>

Ini berhasil! Terima kasih!

0
Justin Bache 9 Mei 2021, 06:23

1 menjawab

Jawaban Terbaik
<table cellspacing='10' id='calendarTable'>
    <tr class='header'>
        <td id='sun'>Sunday</td>
        <td id='mon'>Monday</td>
        <td id='tue'>Tuesday</td>
        <td id='wed'>Wednesday</td>
        <td id='thr'>Thursday</td>
        <td id='fri'>Friday</td>
        <td id='sat'>Saturday</td>              
    </tr>
    </table>

    <script>
   var theday = new Date().getDay();  
           var colors = {
              'sun' : '#206AE6', //sunday
              'mon' : '#cccccc', //moday
              'tue' : '#999999', //tuesday
              'wed' : '#666666', //wednesday
              'thu' : '#333333', //thurs
              'fri' : '#000000', //fri
              'sat' : '#ff0000', //saturday
           };

        window.onload = function(){
           var headerrow = document.querySelectorAll('#calendarTable tr.header td');
           headerrow.forEach(el => {
               el.style.color = colors[el.id];
          })
        }


     </script>
0
Kinglish 9 Mei 2021, 18:16