Любые решения на HTML, JS, php, canvas, svg....<br> skype: politon81<br> e-mail: oleg@polityko.ru<br> <a href="https://toster.ru/user/politon">Профиль на toster.ru</a> <div id="test"> <div class="avatar"><div id="closed" class="closed"></div> <div id="ava" class="ava"></div> <div class="fio"> Гавриил Гавриилович </div> <div class="thepost"> дЫрэктар </div> <div id="print"> печатает </div> </div> <div id="messgeAll"class="contText"> <div id="dialog"> </div> </div> <div class="textinter"> <input id="message" type="text" class="inp" placeholder="Введите сообщение "> <input id="messClcik" value="ОК" class="butt" type="button"> </div> </div>
#test{ position:fixed; width:230px; height:300px; border:5px solid #466991; bottom:0; right:5px; border-radius:10px; animation: show 2s 2s both ease-in-out; overflow:hidden; } @keyframes show { from { height:0px; } to { height:300px; } } .avatar{ width:230px; height:50px; background:#466991; color:#fff; } .ava{ padding-top:5px; width:40px; height:40px; border-radius:50%; background:url('http://a.deviantart.net/avatars/a/u/austin1297.jpg'); background-size:cover; float:left; margin-right:5px; } #print{ animation: printO 1s linear infinite; font-size:12px; padding:0; display:none; } @keyframes printO { from { background:#00FF11;} to { background:#466991;} } .fio{ font-size:16px; } .thepost{ font-size:14px; } .closed{ } .closed:before{ position:absolute; content:"–"; font-weight:bold; top:0; right:5px; font-size:25px; cursor:pointer; } .contText{ position:relative; height:225px; word-wrap:break-word; overflow:auto; } .dialog{ position:absolute; bottom:0; } .owner,.user{ width:180px; border-radius:10px; padding:4px; margin:2px 0; } .owner{ float:left; background:#CEE7EC; } .user{ float:right; background:#FFEEDE; } .textinter{ } .inp{ float:left; width:185px; margin-left:1px; border-radius:5px 0 0 5px; } .butt{ background:green; border:solid 1px green; border-radius:0 5px 5px 0; color:#fff; }
var dialog = document.getElementById("dialog"); var mess = document.createElement('div'); var text = "Доброго времени. Чем могу помочь?"; var textNode = document.createTextNode(text); setTimeout(function() { mess.appendChild(textNode); dialog.appendChild(mess); dialog.className = "owner"; }, 4000); var butonSend = document.getElementById("messClcik"); var messgeAll = document.getElementById("messgeAll"); butonSend.onclick = function() { var theDiv = document.createElement('div'); var userMessage = document.getElementById("message"); if(userMessage.value != ''){ document.getElementById('ava').style="background:url('http://vamotkrytka.ru/_ph/80/2/15311132.gif');background-size:cover; " document.getElementById('print').style= "display:block"; theDiv.innerHTML = userMessage.value; theDiv.className = "user"; messgeAll.appendChild(theDiv); setTimeout(function() { var answear = "привет, У Володи Путина спроси, да ну нах.., как так?, я ушел, завтра пиши, дорого, еп те, по клавишам не попадаю, ты бухой?, иди проспись пьянь!"; var arr = answear.split(', '); var rand = Math.floor(Math.random() * arr.length); var newOwner = document.createElement('div'); newOwner.innerHTML = arr[rand]; newOwner.className = "owner"; messgeAll.appendChild(newOwner); document.getElementById('ava').style=""; document.getElementById('print').style= "display:none"; }, 4000); return true; }else{ return false; } }