Показать сообщение отдельно
  #3 (permalink)  
Старый 03.12.2018, 17:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

dimpase,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   #consoleGetLog{
       width: 200px;
       height: 300px;
       border: 1px solid  #FF0000;
       overflow: hidden;
   }
   #consoleGetLog div{
       height: 50px;
       border: 2px solid  #0000CD;
       border-radius: 8px;
       margin: 2px 4px;
   }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
 var num = 4;
function add()
{    var jk=$('#consoleGetLog');
     var divs = $('#consoleGetLog div');
     var countDivLog = $('#consoleGetLog div').length;
     var max = 25;
     var height;
     if(countDivLog >= max){
        $('#consoleGetLog > div:first-child').remove();
        height = jk[0].scrollHeight - jk[0].offsetHeight;
        jk.scrollTop(height)
    }
    var div = $('<div>', {html : ++num}).appendTo(jk);
    height = jk[0].scrollHeight - jk[0].offsetHeight;
    $('p').html($('#consoleGetLog div').length);//для теста кол-во блоков всего
    jk.delay(100).animate({scrollTop : height }, 300)
    window.setTimeout(add, 1500)
}

add()
});
  </script>
</head>

<body>
<p></p>
<div id="consoleGetLog">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

</body>
</html>

Последний раз редактировалось рони, 03.12.2018 в 18:16.
Ответить с цитированием