// Создаем контейнер для гирлянды и вставляем в начало body
var div = document.createElement('div');
div.innerHTML = '<div id="garland"><div id="nums_1">1</div></div>';
document.body.insertBefore(div, document.body.firstChild);

// Функция переключения состояний гирлянды
function garland() {
    var nums = document.getElementById('nums_1').innerHTML;

    // Состояние 1 → 2
    if (nums == 1) {
        document.getElementById('garland').className = 'garland_1';
        document.getElementById('nums_1').innerHTML = '2';
    }

    // Состояние 2 → 3
    else if (nums == 2) {
        document.getElementById('garland').className = 'garland_2';
        document.getElementById('nums_1').innerHTML = '3';
    }

    // Состояние 3 → 4
    else if (nums == 3) {
        document.getElementById('garland').className = 'garland_3';
        document.getElementById('nums_1').innerHTML = '4';
    }

    // Состояние 4 → 1
    else if (nums == 4) {
        document.getElementById('garland').className = 'garland_4';
        document.getElementById('nums_1').innerHTML = '1';
    }
}

// Запускаем анимацию гирлянды каждые 600 мс
setInterval(function () {
    garland();
}, 600);