原生js模拟微信聊天记录

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>微信聊天窗口</title><style>* {margin: 0;padding: 0;list-style: none;font-family: '微软雅黑'}#container {width: 450px;height: 600px;background: #eee;margin: 10px auto 0;position: relative;box-shadow: 0px 0px 16px #999;overflow: hidden;}.header {background: #000;height: 34px;color: #fff;height: 40px;line-height: 40px;font-size: 20px;padding: 0 10px;}.footer {width: 430px;height: 40px;background: #999;position: fixed;bottom: 0;padding: 10px;}.footer input {width: 300px;height: 38px;outline: none;font-size: 16px;text-indent: 10px;position: absolute;border-radius: 6px;right: 80px;}.footer span {display: inline-block;width: 62px;height: 38px;background: #ccc;font-weight: 900;line-height: 38px;cursor: pointer;text-align: center;position: absolute;right: 10px;top: 14px;border-radius: 6px;}.footer span:hover {color: #777;background: #ddd;}.icon {display: inline-block;background: red;width: 50px;height: 50px;border-radius: 30px;position: absolute;bottom: 3px;left: 10px;cursor: pointer;overflow: hidden;}img {width: 60px;height: 60px;border-radius: 8px;}.content {font-size: 20px;width: 435px;height: 662px;overflow: auto;padding: 5px;}.content li {margin-top: 10px;padding-left: 10px;width: 412px;display: block;clear: both;overflow: hidden;}.content li img {float: left;}.content li span {background: #7cfc00;padding: 10px;border-radius: 10px;float: left;margin: 6px 10px 0 10px;max-width: 310px;border: 1px solid #ccc;box-shadow: 0 0 3px #ccc;}.content li img.imgleft {float: left;}.content li img.imgright {float: right;}.content li span.spanleft {float: left;background: #fff;}.content li span.spanright {float: right;background: #7cfc00;}</style>
</head><body><div id="container"><div class="header"> <span style="float: right;">20:30</span> <span style="float: left;">小泽老师</span> </div><ul class="content"></ul><div class="footer"><div class="icon"> <img src="data:images/1.png" alt="" id="icon"> </div><input id="text" type="text" placeholder="说点什么吧..."> <span id="btn">发送</span> </div></div>
</body>
<script src="js/common.js"></script>
<script>// 获取元素var icon =  my$('icon');var text =  my$('text');var btn =  my$('btn');var content = document.getElementsByTagName('ul')[0];var imgArr = ['images/1.png', 'images/2.png'];// 点击左下角头像可以切换图片var flag = 0;icon.onclick = function () {if (flag === 0) {icon.src = 'images/2.png';flag = 1;} else {icon.src = 'images/1.png';flag = 0;}}// 点击发送按钮，将内容和头像显示到content中btn.onclick = function () {var value = text.value;var li = document.createElement('li');var span =  document.createElement('span');setInnerText(span, value);var img =  document.createElement('img');img.src = imgArr[flag];li.appendChild(img);li.appendChild(span);content.appendChild(li); // 不带[0]获取的是html集合，会报错text.value = '';// 不同用户内容左右显示if (flag === 0) {img.className = 'imgright';span.className = 'spanright';} else {img.className = 'imgleft';span.className = 'spanleft';}}</script></html>

common.js：

// 通过id获取元素
function my$(element) {var el = document.getElementById(element);return el;
}// innerText textContent 兼容性处理
function setInnerText(element, content) {if (typeof element.innerText === 'string') {element.innerText = content;} else {element.textContent = content;}
}

原生js模拟微信聊天记录相关推荐

H5 下拉加载更多(模拟微信聊天记录）
前言前段时间用H5实现一个实时聊天的功能.发现很难实现像微信聊天记录一样下拉加载更多记录.市面上大部分的 Web 项目实现的效果都是上拉加载,下拉刷新.下拉加载更多很少见,下拉在加载数据方面与上拉是 ...
html下拉加载原理,GitHub - gavinjzx/wxPull: 原生JS实现微信公众号或网页使用下拉加载和上拉刷新...
原生JS实现微信公众号或网页使用下拉加载和上拉刷新微信浏览器打开网页显示网址安全信息解决办法,网上很多办法,也找了很久,但是最新的很多用不了. 先看看效果,是不是亲想要的,可以跳过,以免浪费宝贵时间 ...
html下拉加载实现原理,GitHub - sybiele/wxPull: 原生JS实现微信公众号或网页使用下拉加载和上拉刷新...
原生JS实现微信公众号或网页使用下拉加载和上拉刷新微信浏览器打开网页显示网址安全信息解决办法,网上很多办法,也找了很久,但是最新的很多用不了. 先看看效果,是不是亲想要的,可以跳过,以免浪费宝贵时间 ...
微信通讯录java实现_原生JS实现微信通讯录
最近工作当中再一次遇到要实现一个车辆列表,要求能够像微信通讯录一样,实现右侧滑动,点击功能,并且滑动过程中,能够有提示.原来用jquery实现过一次,为了精简代码,现在用原生的实现一次.想必工作中大家 ...
原生js模拟实现京东轮播图
原生js模拟实现京东轮播图一.实现原理 1. 官网发现 2. opacity和z-index 3.定位二.文档目录三.HTML结构四.css样式五.js行为_实现自动轮播与点击效果六.效果 ...
0807-0815原生js模拟实现真快乐网站
0807-0815原生js模拟实现真快乐网站功能实现首页: 无缝轮播图: 自动播放,鼠标移入暂停,鼠标移入浮标切换图片,按钮切换上下图片二级菜单鼠标移入商品分类列表弹出相关二级菜单楼层电梯 ...
原生JS实现微信通讯录
原生JS实现微信通讯录最近工作当中再一次遇到要实现一个车辆列表,要求能够像微信通讯录一样,实现右侧滑动,点击功能,并且滑动过程中,能够有提示.原来用jquery实现过一次,为了精简代码,现在用原生的 ...
用原生JS模拟一个聊天记录表
这是一个模拟聊天记录的案例,初学者可以通过本例对来加深JS的事件的熟悉和理解. 话不多说,我们先来看一下效果图吧. 下面开始说明怎么写吧. HTML结构: <div id="main& ...
jquery+原生js模拟淘宝输入框下拉提示
1.概述: 模拟淘宝.百度的搜索框,当用户输入时,会自动下拉提示关键字,使用组件jquery.js(1.12.1),jquery-ui.js(1.12.1).jquery-ui.css(1.12.1) ...
html5京东秒杀页面代码,静态页面（一）：原生JS模拟京东秒杀专场倒计时
最近将BOM重新复习了一遍,本想使用定时器给女朋友做一个生日倒计时,奈何canvas都忘了.所以模拟了一个京东的秒杀专场倒计时. 各位小伙伴有什么建议和意见,请不吝赐教. 下面是京东首页的截图: 利用 ...

原生js模拟微信聊天记录

原生js模拟微信聊天记录相关推荐

最新文章

热门文章