Блог

Главная - Вопросы по программированию - Обратный отсчет с помощью JavaScript

Обратный отсчет с помощью JavaScript

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я пытаюсь импортировать фотографии из локального файла на моем компьютере в свой HTML-файл. Мне удалось это сделать, но он выполняется в порядке возрастания. Я попытался добавить переменную

JavaScript

 $(document).ready( function() {

 $("span").each( function(i) {
  $(this).append("<img src='Images/With Out Logo/Insta Photo-" (  i) ".JPG' 
/>");   
 });

});

HTML

 <span class="Images"></span>

Ответ №1:

Сначала проверьте length содержимое span коллекции, а затем вставьте изображение в length - i :

 const $spans = $("span");
const { length } = $spans;
$spans.each(function(i) {
  $(this).append("<img src='Images/With Out Logo/Insta Photo-"   (length - i)   ".JPG' />");
});

Комментарии:

1. Мне нужно узнать количество файлов в каталоге, потому что в папке больше изображений.

2. Нет способа сделать это элегантно на стороне клиента; либо жестко запрограммируйте количество файлов, либо используйте серверный язык для их подсчета и динамической генерации соответствующего количества <span> файлов.

Ответ №2:

Попробуйте выполнить цикл в порядке убывания

 $(document).ready(function() {
  let getAllSpans = $('span');
  let getSpanLength = $('span').length;
  for (let i = getSpanLength; i > 0; i--) {
    getAllSpans[i].append('<img src="Images/With Out Logo/Insta Photo-"'   i   '".JPG">')

  }
});

<span class="Images"></span>

Ответ №3:

вы можете уменьшить «i», используя длину интервала, используя Jquery, взгляните на приведенный ниже код.

 let valuez;
$("span").each( function(i) {
  valuez = $('span').length;
   console.log(valuez - i);
 });
function test(){
  valuez = $('span').length;
  console.log(valuez);
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>one</span>
<span>two</span>
<span>three</span>
<span>four</span>
<span>five</span>