1

Используя метод setInterval, по очереди нужно вывести значения из Массива (с помощью innerHTML) в тег p.

<script language="javascript" type="text/javascript">

function name()
{
var products = new Array();
products[0] = '#EA3556';
products[1] = '#61D2D6';
products[2] = '#EDE5E2';
products[3] = '#ED146F';
for (var i = 0; i < products.length; i ++)
 {
   document.getElementById("строка").innerHTML=(products[i] + '<br>')
   clearInterval(timer)
 } 
}
</script>
</head>
<body>
<input type="button" value="Запустить" onclick="timer=window.setInterval('name()',1000);"/>

5
  • 2
    а в чём состоит вопрос? добавьте, пожалуйста, формулировку вопроса, нажав править ниже текста вопроса. 28 янв 2016 в 22:30
  • clearInterval(timer) - отключает таймер при первом же проходе цикла.
    – Stack
    28 янв 2016 в 22:36
  • Что вы уже пытались сделать? Что именно не получилось? 28 янв 2016 в 23:09
  • такое впечатление, что код в вопросе выводится не у всех?
    – Stack
    29 янв 2016 в 0:10
  • В рамках базового курса Javascript на специальности графика и web-design, необходимо было выполнить простую задачу: Используя метод setInterval, по очереди нужно вывести значения из Массива (с помощью innerHTML) в тег <p>. Курс сжатый, знания очень поверхностные, у меня получалось только вывести последние значение массива(использовала метод for). Не понятно было как подцепить setInterval. Спасибо всем! стыдно, что пишу лажу(((( 29 янв 2016 в 9:41

2 ответа 2

2
<script>
function start() {
   var products = ['#EA3556', '#61D2D6', '#EDE5E2', '#ED146F'];
   var index = -1;
   var t = document.getElementById("строка");
   var timer = window.setInterval(function () {
                 if (++index == products.length) 
                    clearInterval(timer);
                 else 
                    t.innerHTML += products[index] + '<br>';
               }, 1000);
}
</script>
<input type="button" value="Запустить" onclick="start()" />
<div id="строка"></div>

Другой вариант (но на основе window.setTimeout):

<script>
function start() {
    if (arguments.length == 0)
        start(['#EA3556', '#61D2D6', '#EDE5E2', '#ED146F']);
    else {
        var products = arguments[0];
        if (products.length > 0) {
            document.getElementById("строка").innerHTML += products[0] + '<br>';
            window.setTimeout(function () { start(products.slice(1)); }, 1000);
        }
    }
}
</script>
<input type="button" value="Запустить" onclick="start()" />
<div id="строка"></div>
1
  • Спасибо большое за два варианта! 30 янв 2016 в 9:27
1

Мой вариант

<script type="text/javascript">
function start() { //функция, которую вызовем по клику
var products = [ //наш массив
    '#EA3556',
    '#61D2D6',
    '#EDE5E2',
    '#ED146F',
],
html_tag = document.getElementById("eto_id_po_nemu_obrashaemsia_k_tegu_p"), //получаем тег p
timer = setInterval(function() { // создаем Interval
    if(products.length) { // Если длинна массива не пуста
        var old_html = html_tag.innerHTML; //берем текущее состояние p
        html_tag.innerHTML = old_html + products[0] + '<br/>'; //соединяем с новым и добавляем
        products.shift(); //удаляем первый элемент массива
    } else { //массив кончился, удаляем глобальную переменную и "таймер\Interval"
        clearInterval(timer);
    }
},1000);
}
</script>
<body>
<input type="button" value="Запустить" onclick="start()"/>
<p id="eto_id_po_nemu_obrashaemsia_k_tegu_p"></p>
1
  • Спасибо большое, за ответ с комментариями! 30 янв 2016 в 9:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.