js+html+css实现本地聊天室

欢迎访问我的个人博客：http://mrzyf.club.

代码完成效果：

话不多说，直接上代码——

css代码：

<style type="text/css">.talk_con {width: 600px;height: 700px;border: 1px solid blue;margin: 0px auto 0;background: #f9f9f9;}.talk_con p {font-size: 15px;color: blue;}.talk_con h1 {text-align: center;}.talk_show {width: 580px;height: 420px;border: 1px solid red;background: #fff;margin: 10px auto 0;overflow: auto;}.talk_input {width: 580px;margin: 10px auto 0;}.whotalk {width: 80px;height: 30px;float: left;outline: none;}.talk_word {width: 420px;height: 180px;padding: 0px;float: left;margin-left: 10px;outline: none;text-indent: 10px;border: 1px solid red;}.talk_sub {width: 56px;height: 30px;float: left;margin-left: 10px;background: red;border: none;color: #fff;border-radius: 20px;cursor: pointer;}.atalk {margin: 10px;}.atalk img {width: 40px;height: 40px;border-radius: 50%;float: left;}.atalk span {display: inline-block;background: #0181cc;border-radius: 10px;color: #fff;padding: 5px 10px;max-width: 200px;white-space: pre-wrap;text-align: left;}.btalk {margin: 10px;text-align: right;}.btalk img {width: 50px;height: 50px;border-radius: 50%;float: right;margin-top: -10px;}.btalk span {display: inline-block;background: grey;border-radius: 10px;color: #fff;padding: 5px 10px;max-width: 200px;white-space: pre-wrap;text-align: left;}</style>

html代码：

<div class="talk_con"><h1>欢迎进入聊天室</h1><div class="talk_show" id="words"><div class="atalk"><span id="asay">吃饭了吗？</span><img src="img/a.jpg" /><p>小哥哥</p></div><div class="btalk"><span id="bsay">还没呢，你呢？</span><img src="img/b.jpg" /><p>小姐姐</p></div></div><div class="talk_input"><select class="whotalk" id="who"><option value="0">小哥哥说：</option><option value="1">小姐姐说：</option></select><textarea class="talk_word" id="talkwords"></textarea><input type="button" value="发送" class="talk_sub" id="talksub"></div></div>

js代码：

<script type="text/javascript">var send = (function() {var Words = document.getElementById("words");var Who = document.getElementById("who");var talkWords = document.getElementById("talkwords");var talkSub = document.getElementById("talksub");return {init: function() {this.event();},event: function() {var that = this;talkSub.onclick = function() {that.chart();}talkWords.onkeydown = function(e) {var keyCode = e.keyCode || e.which;if(e.ctrlKey) {if(keyCode == 13) {that.chart();;}}}},chart: function() {var str = "";if(talkWords.value == "") {alert("消息不能为空");return;}if(Who.value == 0) {str = '<div class="atalk"><span>' + talkWords.value + '</span><img src="img/a.jpg"/><p>小哥哥</p></div>';} else {str = '<div class="btalk"><span>' + talkWords.value + '</span><img src="img/b.jpg"/><p>小姐姐</p></div>';}Words.innerHTML = Words.innerHTML + str;talkWords.value = "";}}}());send.init();</script>

总体代码就是这样了，有任何问题请留言哦。

js+html+css实现本地聊天室相关推荐

node.js学习笔记之简洁聊天室
近来刚开始学node.js,基础,深入,express,koa,react,keystone,mongress,等等各种各样的关于Node.js的东西,每个都学的迷迷糊糊的,原因在于没有练习,感觉学的 ...
socket.io php 聊天室,WebSocket学习（一）——基于socket.io实现简单多人聊天室
前言什么是Websocket呢? 我们都知道在Http协议中,客户端与服务器端的通信是靠客户端发起请求,然后服务器端收到请求再进行回应,这个过程中,客户端是主动的,服务器端是被动的.Websocke ...
关于node的聊天室错误
Deprecationwarning:process,EventEmitter is deprecated use require ('events')instead 关于node的聊天室错误 > ...
JS+HTML+CSS模仿微信界面发送信息
JS+HTML+CSS仿微信聊天界面前端新人又来报道咯欢迎大家指教功能: 1.点击头像可以模拟切换用户. 2.输入信息,点击发送可以显示在屏幕上. 3.新信息在上方,旧信息在下方,方便有滚动条的 ...
Go 快速起步：创建 WebSocket 服务器（聊天室）
先了解 WebSocket 协议和 HTTP 协议一样,WebSocket 协议也建立在 TCP/IP 协议基础上,但不一样的是 HTTP 协议为单向协议,即只能客户端向服务器请求资源,服务器才 ...
使用nodejs搭建聊天室
搭建一个服务器 //引入fs var fs = require('fs') //引入http var http = require('http') var date = new Date() /*** ...
动漫主题的聊天室（html+css+js）（聊天室下篇）
(聊天室下篇) index HTML <!DOCTYPE html> <html lang="en"><head><meta charse ...
html+css+js实现post简易聊天室
目录 1.简述 2.效果图 3.核心代码讲解 A.把具体问题通过post请求上传到远程服务器 B.解析服务器返回的答复,并插入到聊天框 4.源码 1.简述因为项目需求,就做了一个简易的聊天室,用户输 ...
基于Node.js + WebSocket 的简易聊天室
代码地址如下: http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.j ...

js+html+css实现本地聊天室

欢迎访问我的个人博客：http://mrzyf.club.

代码完成效果：

话不多说，直接上代码——

js+html+css实现本地聊天室相关推荐

最新文章

热门文章