js实现微信聊天界面

2023-07-19 01:50:03 167

*{ margin:0; padding:0; } body{ margin:0; padding:0; } .box{ margin:100pxauto; height:900px; width:1200px; background:linear-gradient(toright,violet,pink); } .phone{ top:50px; position:relative; width:500px; height:800px; background:#f6f6f6; left:50%; margin-left:-250px; border-radius:30px; } .phone.header{ position:absolute; width:135px; height:5px; background:rgba(0,0,0,0.8); -webkit-border-radius:80px; -moz-border-radius:80px; border-radius:80px; left:50%; margin-left:-67.5px; top:40px; } .phone.content{ position:absolute; top:75px; width:460px; height:640px; background:#fff; left:50%; margin-left:-230px; border-radius:1px; border:2pxsolidgray; } .phone.footer{ position:absolute; width:50px; height:50px; background:pink; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; bottom:15px; left:50%; margin-left:-25px; } .content.list{ height:575px; list-style-type:none; overflow:hidden; } .listli{ margin-top:30px; } .content.list.leftimg{ display:inline-block; margin:0; float:left; margin-left:15px; } .content.list.leftp{ color:#333333; margin-left:78px; width:320px; padding:20px10px; font-size:20px; background:pink; border-radius:6px; text-align:left; } .content.list.rightimg{ display:inline-block; margin:0; float:right; margin-right:15px; } .content.list.rightp{ text-align:right; color:#333333; margin-left:37px; width:320px; padding:20px10px; font-size:20px; background:pink; border-radius:6px; } .content-bottom{ overflow:hidden; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; height:65px; background:rgba(0,0,0,0.2); padding:10px30px; position:relative; } .content-bottom.myInput{ display:inline-block; height:30px; width:250px; font-size:20px; border-radius:5px; border:1pxsolid#999999; text-indent:10px; outline:none; position:absolute; top:50%; margin-top:-15px; margin-left:20px; } .content-bottom.out{ height:32px; width:60px; display:inline-block; position:absolute; right:30px; top:50%; border:1pxsolid#999999; margin-top:-16px; font-size:17px; outline:none; background:none; cursor:pointer; } .content-bottom.out:hover{ background-color:pink; }

varout=document.querySelector(".out");//获取发送按钮 varmyInput=document.querySelector(".myInput"); varpic=document.getElementById("pic");//获取图片 varonOff=true; varlist=document.querySelector(".list");//获取ul pic.onclick=function(){ if(onOff){ pic.src="../image/two.jpeg"; onOff=false; }else{ pic.src="https://www.haoziyuan.cc../image/one.jpeg"; onOff=true; } }; out.onclick=function(){ varvalue=myInput.value;//获取文字内容 if(value==""){ alert("请输入内容"); }else{ if(onOff){ list.innerHTML+="

"+value+"

"; }else{ list.innerHTML+="

"+value+"

"; } } myInput.blur(myInput.value='');//失去焦点，文本框清空 };

js实现微信聊天界面

热门推荐

随机推荐