Показать сообщение отдельно
  #7 (permalink)  
Старый 16.11.2014, 20:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Vladimir93,
Вариант для современных браузеров ... меняет фон последних трёх div -- время из data - вопросы знатокам , почему не работает в хроме, почему не работает строка 44 без window.setTimeout и как заменить если можно window.setTimeout ... есть и ещё вопросы
<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style>
        .animated {
            transition: background-color 2s ease-out;
            width: 150px;
            height: 150px;
            margin: 10px;
            border: 1px solid black;
            display: inline-block;
            background-color: rgb(255, 255, 0);
        }
    </style>
</head>

<body>

    <div class="animated" data-duration="5s"></div>
    <div class="animated" data-duration="5s"></div>
    <div class="animated" data-duration=".7s"></div>
    <div class="animated" data-duration="8s"></div>

    <script> function randomRGBComponent() {
           return Math.round(Math.random() * 255);
       }

       function randomRGBColor() {
           return 'rgb(' + randomRGBComponent() + ', ' + randomRGBComponent() + ', ' + randomRGBComponent() + ')';
       }

       function setBackgroundColor(elem, s) {
           function go() {
               var color = randomRGBColor()
               elem.style.backgroundColor = color
           }
           elem.style.transitionDuration = s;
           elem.addEventListener('transitionend', go, false);
           go() //window.setTimeout(go, 0);
       }
       window.onload = function() {
           [].forEach.call(document.querySelectorAll('.animated:nth-last-child(-n + 4)'), function(elem, i) {
               setBackgroundColor(elem, elem.dataset.duration)
           })
       }
    </script>
</body>

</html>

Последний раз редактировалось рони, 17.11.2014 в 23:52.
Ответить с цитированием