Блог

Я создаю веб-сайт, который показывает новое изображение для каждой недели в году. Я дошел до того, что смог получить номер текущей недели в качестве переменной, но я не уверен, как получить к нему доступ таким образом, чтобы я мог изменить отображение указанного DIV с «none» на «block».

Мои знания для начинающих подсказывают мне, что что-то подобное было бы правильным,

JS-код.

 Date.prototype.getWeekNumber = function(){
    var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
    var dayNum = d.getUTCDay() || 7;
    d.setUTCDate(d.getUTCDate()   4 - dayNum);
    var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
    return Math.ceil((((d - yearStart) / 86400000)   1)/7)
  };


var s = (new Date().getWeekNumber());
var s = document.getElementById(d.getDay());
    s.style.display = (s.style.display == 'block') ? 'none' : 'block';
 

Образец HTML-кода.

 <div class="container" id="8" style="display:none">
      <div class="row">
        <div class="col">
          <h1>Week 8</h1>
          <p>Sample Text</p>
        </div>

        <div class="col">
          <img src="image.jpg" class="img-fluid">
        </div>

    </div>
 

Следующий код должен работать. Я добавил еще один контейнер изображений для целей тестирования.

 Date.prototype.getWeekNumber = function(){
    var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
    var dayNum = d.getUTCDay() || 7;
    d.setUTCDate(d.getUTCDate()   4 - dayNum);
    var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
    return Math.ceil((((d - yearStart) / 86400000)   1) / 7)
};

let weekNumber = new Date().getWeekNumber();
document.getElementById(weekNumber).style.display = "block"; 

 <div class="container" id="8" style="display:none">
      <div class="row">
        <div class="col">
          <h1>Week 8</h1>
          <p>Sample Text</p>
        </div>

        <div class="col">
          <img src="image.jpg" class="img-fluid">
        </div>
 </div>
 <div class="container" id="9" style="display:none">
      <div class="row">
        <div class="col">
          <h1>Week 9</h1>
          <p>Sample Text</p>
        </div>

        <div class="col">
          <img src="image.jpg" class="img-fluid">
        </div>
 </div>