私信的html页面模板,私信.html · 空山谧语/haichuan - Gitee.com

.msg_bd {

margin-top: 44px;

padding: 5px 10px

}

ul {

margin: 0;

padding: 0;

}

li {

list-style: none;

margin: 0;

}

p {

margin: 0;

}

footer {

position: fixed;

bottom: 0;

width: 100%;

border-top: 1px solid #D8D8D8;

z-index: 999;

background: #fff;

}

.inpu_bd {

display: flex;

flex-direction: row;

height: 50px;

line-height: 50px;

padding: 0 10px;

align-content: center;

justify-content: center;

padding-right: 0;

}

.inpu {

height: 40px;

line-height: 40px;

margin: 5px 0px;

border: 1px solid #D8D8D8;

border-radius: 4px;

margin-right: 10px;

text-indent: 5px;

overflow-x: scroll;

}

.inpu_rt button {

height: 34px!important;

margin-top: 8px;

}

.chat-thread {

/*margin: 24px auto 0 auto;

padding: 0 20px 0 0;*/

list-style: none;

overflow-y: scroll;

overflow-x: hidden;

}

.chat-thread li {

position: relative;

clear: both;

display: inline-block;

padding: 10px;

margin: 0 0 20px 0;

/* font: 16px/20px 'Noto Sans', sans-serif; */

font-size: 16px;

border-radius: 10px;

background-color: rgba(25, 147, 147, 0.2);

}

.chat-thread li:before {

position: absolute;

top: 0;

width: 40px;

height: 40px;

border-radius: 40px;

content: '';

}

/* Chat - Speech Bubble Arrow */

.chat-thread li:after {

position: absolute;

top: 15px;

content: '';

width: 0;

height: 0;

border-top: 15px solid rgba(25, 147, 147, 0.2);

}

.chat-thread li:nth-child(odd) {

animation: show-chat-odd 0.15s 1 ease-in;

-moz-animation: show-chat-odd 0.15s 1 ease-in;

-webkit-animation: show-chat-odd 0.15s 1 ease-in;

float: right;

margin-right: 60px;

color: #5A5A5A;

}

.chat-thread li:nth-child(odd):before {

right: -60px;

background-image: url(img/001.jpg);

}

.chat-thread li:nth-child(odd):after {

border-right: 15px solid transparent;

right: -15px;

}

.chat-thread li:nth-child(even) {

animation: show-chat-even 0.15s 1 ease-in;

-moz-animation: show-chat-even 0.15s 1 ease-in;

-webkit-animation: show-chat-even 0.15s 1 ease-in;

float: left;

margin-left: 60px;

color: #5A5A5A;

}

.chat-thread li:nth-child(even):before {

left: -60px;

background-image: url(img/cbd.jpg);

}

.chat-thread li:nth-child(even):after {

border-left: 15px solid transparent;

left: -15px;

}

.chat-window {

position: fixed;

bottom: 18px;

}

.chat-window-message {

width: 100%;

height: 48px;

font: 32px/48px 'Noto Sans', sans-serif;

background: none;

color: #0AD5C1;

border: 0;

border-bottom: 1px solid rgba(25, 147, 147, 0.2);

outline: none;

}

私信

• heheheheheheh
• 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

发送

mui.init();

var wsUri = "ws://app.tianhuayun.net:8282?token=fcf1a0442ae36ef05821392fc85accf80131556c";

var websocket = new WebSocket(wsUri);

var output;

websocket.onopen = function(evt) {

onOpen(evt);

console.log('onopen');

return false;

};

//websocket.onclose = function(evt) {

//onClose(evt)

//};

websocket.onmessage = function(evt) {

onMessage(evt);

console.log('onmessage');

console.log(evt)

};

websocket.onerror = function(evt) {

onError(evt)

};

function onOpen(evt) {

console.log("CONNECTED");

doSend("WebSocket rocks");

}

function onClose(evt) {

console.log("DISCONNECTED");

}

function onMessage(evt) {

websocket.close();

}

function onError(evt) {

}

function doSend(message) {

console.log("SENT: " + message);

websocket.send(message);

}

$('.sends').click(function(){

var message = $('.inpu').text();

//console.log(message)

//onOpen(message)

websocket.send(message);

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史