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 that you have read and understand our privacy policy and code of conduct.

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