Нужна помощь в поиске и устранении неисправностей Код Javascript в файле html для школьного проекта

Question

Это моя первая публикация в stackoverflow, поэтому я приношу свои извинения, если есть какие-либо правила или рекомендации, которые я не выполнил правильно.

проблема

В настоящее время я работаю над проектом школы, где мы должны создать веб-сайт и мой сайт строится с кладкой (от http://masonry.desandro.com/). Я хочу, чтобы мои изображения отображались по-разному каждый раз, когда кто-то ходил на сайт, поэтому я хотел создать систему, в которой будут загружены разные изображения. Я собрал код из нескольких источников в Интернете, но он не возвращает правильное изображение (или что-то в этом роде). Я все еще довольно новый для кодирования, но то, что я пытался сделать для достижения этой цели заключается в следующем:

Кодекса

<img id="image1" class="grid-item grid-item--width2 grid-item--height3" src="http://placehold.it/200x200"> 
     <script> 
     var mydate = new date(); 
     var mynumber = mydate.getDate(); 

     document.getElementById("image1").src = "images/" + mynumber +".jpg"; 
     if(mynumber==33) 
     { 
      mynumber=1; 
     } 
     else 
     { 
      var mynumber=mynumber+1; 
     } 
     </script> 

Идея заключается в том, что она захватывает дату, а затем использует эту дату, чтобы начать захватывать изображения в папке с изображениями (изображения называются 1,2,3,4 ... это продолжается и будет добавлено, но для целей тестирования я убедился, что их больше 31). Это означает, что сайт будет немного отличаться от дня на день. Однако это не сработало, и я не мог понять, почему именно.

Дополнительная информация

Как я новичок многое из этого я не знаю, как много информации требуется, чтобы решить эту проблему, так что я теперь пытаться добавить столько, сколько я могу думать, много может потребоваться следующее.

• Все мое испытание было сделано на хроме
• Всей моей работа была сделана с помощью кронштейнов
• Я использую шаблонные изображения для всех изображений, чтобы начать с
• Каждого изображением, загруженных на страницу является placholder изображение, начинающееся с 'image1', 'image2', 'image3' ... и так далее.
• Если я могу заставить этот код работать, он будет скопирован под каждым изображением и будет заменять их по одному.

• Js файл прилагается:

  $(document).ready(function() { 
      var $grid = $('.grid').masonry({ 
       itemSelector: '.grid-item', 
       columnWidth: 200 
      }); 
  
      var $stamp = $grid.find('.stamp'); 
      var isStamped = false; 
      $('.stamp-button').on('click', function() { 
       // stamp or unstamp element 
       if (isStamped) { 
        $grid.masonry('unstamp', $stamp); 
       } else { 
        $grid.masonry('stamp', $stamp); 
       } 
       // trigger layout 
       $grid.masonry('layout'); 
       // set flag 
       isStamped = !isStamped; 
      }); 
  }); 
  

спасибо за ваше время

Спасибо, что нашли время, чтобы помочь мне с моим школьным проектом. Любые отзывы приветствуются, и если вам нужна дополнительная информация, чтобы помочь, пожалуйста, сообщите мне, что я могу вам предоставить. Спасибо

Answer 1

Я не знаю о masonary. Также мне понравится источник изображения. Есть ли какой-нибудь массив, который держит изображения? или вы получите ответ json. Просто для демонстрации я поставил некоторое изображение в массив. Также не у каждого изображения есть его расширение. .jpg. В этот день написания 8Dec я поставил всего 10 изображений.Вы можете поставить некоторые пустые «» перед изображениями только, чтобы соответствовать индексу массива с источником изображения

var tDate = new Date(); 
var getToday = tDate.getDate(); 
console.log(imgSource[getToday]); 
document.getElementById("image1").src=imgSource[getToday]; 

Чтобы увидеть полный код, пожалуйста, посетите HERE

Также вы добавили эту часть

src="http://placehold.it/200x200" 

Нужно добавить источник изображения в указанном месте?