jQuery her 5 çalışma saatinde bir renk ayarını sıfırlar

Question

Aşağıda, HTML'deki alandan (çalışma saatleri) alınan ve sonra da desenle eşleşen temel bir komut dosyası var. Belirli çalışma saatleri 1 saate ulaştığında, HTML metninin rengi (notlar) değişir.

Sorum şu: Komut dosyası nasıl küçük hale getirilir ve ikinci bölüm, renk desenini her 5 saatte bir çevrime sıfırlamaktır. Eğer çalışma saatleri 20 saate ulaştıysa, renk düzeni 4 kez daire içine alınmış olmalıdır.

Yardımlarınız için teşekkür ederiz!

 var str = $(".work-hours").text(); 
     var pattern = /[0-9]+/; 
     var match = str.match(pattern); 

     if (parseInt(match) == 0) { 
      $('.notes').css('color','white'); 
     } 
     if ((parseInt(match) >= 1) && (parseInt(match) < 2)) { 
      $('.notes').css('color','green'); 
     } 
     if ((parseInt(match) >= 2) && (parseInt(match) < 3)) { 
      $('.notes').css('color','yellow'); 
     } 
     if ((parseInt(match) >= 3) && (parseInt(match) < 4)) { 
      $('.notes').css('color','orange'); 
     } 
     if ((parseInt(match) >= 4) && (parseInt(match) < 5)) { 
      $('.notes').css('color','pink'); 
     } 
     if (parseInt(match) >= 5) { 
      $('.notes').css('color','red'); 
     } 

Answer 1

parseInt saat daha eklendiğinde renkler etrafında çember bunu istiyorsanız taban değeri bu

var str = $(".work-hours").text(); 
 
    var pattern = /[0-9]+/; 
 
    var match = str.match(pattern); 
 
    
 
    var colors = ['white', 'green', 'yellow', 'orange', 'pink', 'red']; 
 

 
    $('.notes').css('color', colors[parseInt(match)]);

gibi kod kolaylaştırabilirsiniz yapar çünkü, ayrıca yapabilirdi dizinin içine sığdırmak için bazı mantık veya dizi için gerekli süreyi uzatmanın temel bir yolu:

Answer 2

İlk sorunuzu yanıtlamanıza yardımcı olmak için, if ifadeleriniz yalnızca bir satır olduğundan, parantezlere ihtiyacınız yoktur.

İkinci sorunuzu yanıtlamak için, eşittir işareti yerine % mod simgesini kullanın.

var str = $(".work-hours").text(); 
    var pattern = /[0-9]+/; 
    var match = str.match(pattern); 

    if (parseInt(match)%5 === 0) 
     $('.notes').css('color','green'); 
    if (parseInt(match)%5 === 1) 
     $('.notes').css('color','yellow'); 
    if (parseInt(match)%5 === 2) 
     $('.notes').css('color','orange'); 
    if (parseInt(match)%5 === 3) 
     $('.notes').css('color','pink'); 
    if (parseInt(match)%5 === 4) 
     $('.notes').css('color','red'); 

Answer 3

Sorunuzun ikinci kısmı için, belirli bir zaman aralığına göre herhangi bir işlev çalıştırmak için setInterval işlevini kullanabilirsiniz.

function changeColor() 
{ 
    ... 
} 

setInterval(changeColor, 5*60*60*1000); //Works every five hours 

Answer 4

colors = ['white', 'green', 'yellow', 'orange', 'pink', 'red'] ; 
$('.notes').css('color',colors[$(".work-hours").text() 
      .match(/[0-9]+/)[0] % colors.length]);