快捷導(dǎo)航

基于javascript制作微信聊天面板

更新時(shí)間：2020年08月09日 12:12:55 作者：白超華

這篇文章主要為大家詳細(xì)介紹了基于javascript制作微信聊天面板的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例分享了javascript制作微信聊天面板的相關(guān)代碼，具體內(nèi)容如下

先上圖吧

點(diǎn)擊頭像更換說(shuō)話對(duì)象，簡(jiǎn)單說(shuō)下實(shí)現(xiàn)原理，html中創(chuàng)建一個(gè)ul用于存放所有說(shuō)話的內(nèi)容，對(duì)話內(nèi)容是有javascript 動(dòng)態(tài)生成，

主要難點(diǎn)：先布局好css，當(dāng)時(shí)奧巴馬發(fā)送時(shí)候，讓這個(gè)li有浮動(dòng)，當(dāng)是小胖時(shí)候，讓這個(gè)li左浮動(dòng)。

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>模擬短信發(fā)送</title>
 <style>
 * {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: '微軟雅黑'
 }
 #container {
  width: 450px;
  height: 780px;
  background: #eee;
  margin: 80px auto 0;
  position: relative;
  box-shadow: 20px 20px 55px #777;
 }
 .header {
  background: #000;
  height: 34px;
  color: #fff;
  line-height: 34px;
  font-size: 20px;
  padding: 0 10px;
 }
 .footer {
  width: 430px;
  height: 50px;
  background: #666;
  position: absolute;
  bottom: 0;
  padding: 10px;
 }
 .footer input {
  width: 275px;
  height: 45px;
  outline: none;
  font-size: 20px;
  text-indent: 10px;
  position: absolute;
  border-radius: 6px;
  right: 80px;
 }
 .footer span {
  display: inline-block;
  width: 62px;
  height: 48px;
  background: #ccc;
  font-weight: 900;
  line-height: 45px;
  cursor: pointer;
  text-align: center;
  position: absolute;
  right: 10px;
  border-radius: 6px;
 }
 .footer span:hover {
  color: #fff;
  background: #999;
 }
 #icon {
  display: inline-block;
  background: red;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  position: absolute;
  bottom: 6px;
  left: 14px;
  cursor: pointer;
  overflow: hidden;
 }
 img {
  width: 60px;
  height: 60px;
 }
 .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>
 <script>
 window.onload = function(){
  var arrIcon = ['img/1.jpg','img/2.jpg'];
  var num = 0; //控制頭像改變
  var iNow = -1; //用來(lái)累加改變左右浮動(dòng)
  var icon = document.getElementById('icon').getElementsByTagName('img');
  var btn = document.getElementById('btn');
  var text = document.getElementById('text');
  var content = document.getElementsByTagName('ul')[0];
  var img = content.getElementsByTagName('img');
  var span = content.getElementsByTagName('span');

  icon[0].onclick = function(){
  if(num==0){
   this.src = arrIcon[1];
   num = 1;
  }else if(num==1){
   this.src = arrIcon[0];
   num = 0;
  }  
  }
  btn.onclick = function(){
  if(text.value ==''){
   alert('發(fā)送內(nèi)容不能為空');
  }else {
   content.innerHTML += '<li><img src="'+arrIcon[num]+'"><span>'+text.value+'</span></li>';
   iNow++;
   if(num==0){
   img[iNow].className += 'imgright';
   span[iNow].className += 'spanright';
   }else {
   img[iNow].className += 'imgleft';
   span[iNow].className += 'spanleft';
   }
   text.value = '';
  }
  }
 }
 </script>
</head>
<body>
 <div id="container">
 <div class="header">
  <span style="float: left;">白超華-博客園</span>
  <span style="float: right;">20:30</span>
 </div>
 <ul class="content"></ul>
 <div class="footer">
  <div id="icon">
  <img src="img/1.jpg" alt="">
  </div>
  <input id="text" type="text" placeholder="說(shuō)點(diǎn)什么吧...">
  <span id="btn">發(fā)送</span>
 </div>
 </div>
</body>
</html>

本文已被整理到了《JavaScript微信開(kāi)發(fā)技巧匯總》，歡迎大家學(xué)習(xí)閱讀。

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開(kāi)發(fā)教程》小編為大家精心整理的，希望喜歡。

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: