jQuery+amaze ui仿电脑端微信网页版聊天界面代码,还有很多功能还没有完善,例如对话快捷键,用户切换,表情包发送等等,算是个半成品吧,感兴趣的朋友可以继续完善。
js代码
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<script type="text/javascript" src="js/zUI.js"></script>
<script type="text/javascript" src="js/wechat.js"></script>
<script type="text/javascript">
//三图标
window.onload=function(){
function a(){
var si1 = document.getElementById('si_1');
var si2 = document.getElementById('si_2');
var si3 = document.getElementById('si_3');
si1.onclick=function(){
si1.style.background="url(images/icon/head_2_1.png) no-repeat"
si2.style.background="";
si3.style.background="";
};
si2.onclick=function(){
si2.style.background="url(images/icon/head_3_1.png) no-repeat"
si1.style.background="";
si3.style.background="";
};
si3.onclick=function(){
si3.style.background="url(images/icon/head_4_1.png) no-repeat"
si1.style.background="";
si2.style.background="";
};
};
function b(){
var text = document.getElementById('input_box');
var chat = document.getElementById('chatbox');
var btn = document.getElementById('send');
var talk = document.getElementById('talkbox');
btn.onclick=function(){
if(text.value ==''){
alert('不能发送空消息');
}else{
chat.innerHTML += '<li class="me"><img src="'+'images/own_head.jpg'+'"><span>'+text.value+'</span></li>';
text.value = '';
chat.scrollTop=chat.scrollHeight;
talk.style.background="#fff";
text.style.background="#fff";
};
};
};
a();
b();
};
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791