Блог

Главная - Вопросы по программированию - Элемент, который автоматически переключается с помощью javascript

Элемент, который автоматически переключается с помощью javascript

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь создать элемент, который переключается сам по себе. Для примера я хочу <p>Text1</p> переключиться на <p>Text2</p> через 1 секунду. Есть ли какой-либо код javascript, который я могу использовать?

Вот пример того, что я пытаюсь сделать:

Переключение текста

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

1. Вы пробовали setInterval или setTimeout?

2. Вам нужно, чтобы он переключался несколько раз, с 1 на 2, с 1 на 2 и т.д., или только один раз?

Ответ №1:

Вы могли бы использовать функцию setTimeout(//function, n * 1000), чтобы это выполнялось автоматически через n секунд

В вашем примере допустим, у вас есть:

 let s = 1000; // second in milliseconds
let n = 3; //let's say you want it to change after 3 seconds

function changeText() {
  document.getElementById('text').innerText = 'Text2'
}

setTimeout(() => {
  changeText()
}, n * s); // you could also use setTimeout(function () { changeText() }, n * s); 
 <p id="text">Text1</p>
<!-- give the element an id ("text") in this example -->

Ответ №2:

Вам нужно назначить класс или идентификатор элементу, например. <p id="el">...</p> , чтобы вы могли запросить его позже. Затем получите его через document.getElementById или document.getElementByClassName : document.getElementById('el') .

Теперь у вас есть элемент, пришло время изменить текст внутри него, поэтому получите к нему доступ через свойство innerText, а затем присвоите новое значение.

Хорошо, вы хотите, чтобы это было сделано за одну секунду, поэтому установите тайм-аут:

 setTimeout(() => { /** ... */ }, 1000);

Примечание: 1000 — это 1 секунда.

Ответ №3:

Простым способом было бы присвоить каждому элементу идентификатор. Затем в javascript вызовите setInterval или setTimeout . Каждую секунду получайте документы по идентификатору и переключайте их стиль видимости CSS.

Метки: ,