欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript仿聊天室聊天記錄

 更新時(shí)間：2016年12月27日 15:49:47   作者：maskice  
這篇文章主要為大家詳細(xì)介紹了JavaScript仿聊天室聊天記錄實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js仿聊天室聊天記錄的具體代碼，供大家參考，具體內(nèi)容如下

參考樣式（css自定義聊天窗口樣式）：http://xiazai.jb51.net/201612/yuanma/css3chatstyle(jb51.net).rar

功能描述：

1. 用戶在微信公眾號(hào)里發(fā)送內(nèi)容，參與活動(dòng)
2. 后臺(tái)提供類似聊天室的窗口顯示用戶實(shí)時(shí)發(fā)布的內(nèi)容

界面截圖：

代碼：

body { 
 padding: 0; 
 margin: 0; 
 background: -moz-linear-gradient(-45deg, #183850 0, #183850 25%, #192c46 50%, #22254c 75%, #22254c 100%); 
 background: -webkit-linear-gradient(-45deg, #183850 0, #183850 25%, #192c46 50%, #22254c 75%, #22254c 100%); 
 background-repeat: no-repeat; 
 background-attachment: fixed; 
} 
 
::-webkit-scrollbar { 
 width: 10px; 
} 
 
::-webkit-scrollbar-track { 
 border-radius: 10px; 
 background-color: rgba(25, 147, 147, 0.1); 
} 
 
::-webkit-scrollbar-thumb { 
 border-radius: 10px; 
 background-color: rgba(25, 147, 147, 0.2); 
} 
 
.chat-thread { 
 margin: 24px auto 0 auto; 
 padding: 0 20px 0 0; 
 list-style: none; 
 overflow-y: scroll; 
 overflow-x: hidden; 
} 
 
.chat-thread .li { 
 position: relative; 
 clear: both; 
 display: inline-block; 
 padding: 16px 40px 16px 20px; 
 margin: 0 0 20px 0; 
 font: 16px/20px 'Noto Sans', sans-serif; 
 border-radius: 10px; 
 background-color: rgba(25, 147, 147, 0.2); 
} 
 
/* Chat - Avatar */ 
.chat-thread .img { 
 width: 50px; 
 height: 50px; 
 border-radius: 50px; 
 content: ''; 
 float:left; 
 
} 
 
/* Chat - Speech Bubble Arrow */ 
.chat-thread li:after { 
 position: absolute; 
 top: 15px; 
 content: ''; 
 width: 0; 
 height: 0; 
 border-top: 15px solid rgba(25, 147, 147, 0.2); 
} 
 
.chat-thread li:nth-child(odd) { 
 animation: show-chat-odd 0.15s 1 ease-in; 
 -moz-animation: show-chat-odd 0.15s 1 ease-in; 
 -webkit-animation: show-chat-odd 0.15s 1 ease-in; 
 float: right; 
 margin-right: 80px; 
 color: #0AD5C1; 
} 
 
.chat-thread li:nth-child(odd):before { 
 right: -80px; 
} 
 
.chat-thread li:nth-child(odd):after { 
 border-right: 15px solid transparent; 
 right: -15px; 
} 
 
.chat-thread li:nth-child(even) { 
 animation: show-chat-even 0.15s 1 ease-in; 
 -moz-animation: show-chat-even 0.15s 1 ease-in; 
 -webkit-animation: show-chat-even 0.15s 1 ease-in; 
 float: left; 
 margin-left: 80px; 
 color: #0EC879; 
} 
 
.chat-thread li:nth-child(even):before { 
 left: -80px; 
} 
 
.chat-thread li:nth-child(even):after { 
 border-left: 15px solid transparent; 
 left: -15px; 
} 
 
.chat-window { 
 position: fixed; 
 bottom: 18px; 
} 
 
.chat-window-message { 
 width: 100%; 
 height: 48px; 
 font: 32px/48px 'Noto Sans', sans-serif; 
 background: none; 
 color: #0AD5C1; 
 border: 0; 
 border-bottom: 1px solid rgba(25, 147, 147, 0.2); 
 outline: none; 
} 
 
/* Small screens */ 
@media all and (max-width: 767px) { 
 .chat-thread { 
 width: 90%; 
 height: 500px; 
 } 
 
 .chat-window { 
 left: 5%; 
 width: 90%; 
 } 
} 
/* Medium and large screens */ 
@media all and (min-width: 768px) { 
 .chat-thread { 
 width: 70%; 
 height: 500px; 
 } 
 
 .chat-window { 
 left: 25%; 
 width: 50%; 
 } 
} 
@keyframes show-chat-even { 
 0% { 
 margin-left: -480px; 
 } 
 
 100% { 
 margin-left: 0; 
 } 
} 
@-moz-keyframes show-chat-even { 
 0% { 
 margin-left: -480px; 
 } 
 
 100% { 
 margin-left: 0; 
 } 
} 
@-webkit-keyframes show-chat-even { 
 0% { 
 margin-left: -480px; 
 } 
 
 100% { 
 margin-left: 0; 
 } 
} 
@keyframes show-chat-odd { 
 0% { 
 margin-right: -480px; 
 } 
 
 100% { 
 margin-right: 0; 
 } 
} 
@-moz-keyframes show-chat-odd { 
 0% { 
 margin-right: -480px; 
 } 
 
 100% { 
 margin-right: 0; 
 } 
} 
@-webkit-keyframes show-chat-odd { 
 0% { 
 margin-right: -480px; 
 } 
 
 100% { 
 margin-right: 0; 
 } 
} 
.credits{ 
 text-align:center; 
 margin-top:35px; 
 color: rgba(255, 255, 255, 0.35); 
 font-family: 'Noto Sans', sans-serif; 
} 
.credits a{ 
 text-decoration:none; 
 color: rgba(255, 255, 255, 0.35); 
} 

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title>紅包詳情</title> 
 <meta name="keywords" content="keyword1,keyword2,keyword3"> 
 <meta name="description" content="this is my page"> 
 <meta name="content-type" content="text/html; charset=UTF-8"> 
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 
 <script src="../js/jquery-1.7.2.min.js"></script> 
 <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /> 
 </head> 
 <body > 
 <div id="convo" class="chat-thread"></div> 
 </body> 
 <script type="text/javascript"> 
 var maxId = 0; 
 var ip = "http://..."; 
 var imgArr=new Array(); 
 var contentArr=new Array(); 
 var canAdd = false; 
 function loadUser(){ 
  $.post("../servlet/luckDraw", // 訪問后臺(tái)查詢數(shù)據(jù) 
    { 
    type : "messageList", 
    limit : 5, 
    maxId : maxId, 
    time : new Date() 
    }, 
    function(data,status){ 
    var jsonobj=eval('('+data+')'); 
    if(jsonobj.code=="200"){ 
     canAdd = false; 
     imgArr=new Array(); 
     contentArr=new Array(); 
     var jsonarr = jsonobj.list; 
     var str = ""; 
     for(var i=0;i<jsonarr.length;i++){ 
      //console.log(time1); 
      imgArr[i] = ip+jsonarr[i].headImg; 
      contentArr[i] = jsonarr[i].content; 
      maxId = jsonarr[i].id; 
     } 
     canAdd = true; 
    } 
  }); 
 } 
 loadUser(); 
 //var t1 = window.setTimeout(time(1),1000); 
 var t1 = window.setInterval(time,3000); 
 function time(){ 
  if(!canAdd) 
   return; 
  if(imgArr.length==0){ 
   loadUser(); 
   return; 
  } 
  var img = imgArr[0]; 
  var content = contentArr[0]; 
  imgArr.splice(0, 1); 
  contentArr.splice(0, 1); 
  $("#convo").append('<div>'+ 
    '<div style="width:60px;height:50px;float:left">
     <img alt="" height="50px" width="50px" class="img" src="'+img+'"></div>'+ 
    '<div style="width:90%;float:left;"><span class="li">'+content+'</span>
    </div>'+ '</div>'); 
  var e=document.getElementById("convo");//保持滾動(dòng)條一直在最底部 
  e.scrollTop=e.scrollHeight; 
 } 
</script> 
</html> 


String sql = "SELECT c.*,u.nickName,u.headImg " 
    + "from wx_costomersendmessage c,bid_user u " 
    + "where c.openId=u.openId and c.id>"+maxId 
    +" order by c.id Limit 0,"+limit;

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • javascript實(shí)現(xiàn)簡單的ajax封裝示例

    javascript實(shí)現(xiàn)簡單的ajax封裝示例

    這篇文章主要介紹了javascript實(shí)現(xiàn)簡單的ajax封裝功能,結(jié)合實(shí)例形式分析了ajax基本功能與操作實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2016-12-12
  • iscroll動(dòng)態(tài)加載數(shù)據(jù)完美解決方法

    iscroll動(dòng)態(tài)加載數(shù)據(jù)完美解決方法

    這篇文章主要為大家詳細(xì)介紹了iscroll動(dòng)態(tài)加載數(shù)據(jù)的完美解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-07-07
  • for?of?和?for?in?的區(qū)別介紹

    for?of?和?for?in?的區(qū)別介紹

    這篇文章主要介紹了for?of?和?for?in?的區(qū)別,for?of?和?for?in都是用來遍歷的屬性，本文重點(diǎn)介紹下for?of?和?for?in?的區(qū)別，需要的朋友可以參考下
    2022-12-12
  • javascript原生ajax寫法分享

    javascript原生ajax寫法分享

    本文通過2個(gè)示例來給大家分享了下原生javascript結(jié)合ajax實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求的方法以及原理，非常的簡單實(shí)用，有需要的小伙伴可以參考下
    2016-04-04
  • 詳解CocosCreator項(xiàng)目結(jié)構(gòu)機(jī)制

    詳解CocosCreator項(xiàng)目結(jié)構(gòu)機(jī)制

    這篇文章主要介紹了詳解CocosCreator項(xiàng)目結(jié)構(gòu)機(jī)制，只有了解這些機(jī)制后，才能更好的進(jìn)行項(xiàng)目開發(fā)，避免潛在錯(cuò)誤，并且快速的除錯(cuò)
    2021-04-04
  • js canvas實(shí)現(xiàn)俄羅斯方塊

    js canvas實(shí)現(xiàn)俄羅斯方塊

    這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)俄羅斯方塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-10-10
  • JavaScript中字符串GBK與GB2312的編解碼示例講解

    JavaScript中字符串GBK與GB2312的編解碼示例講解

    在瀏覽器JavaScript環(huán)境中,可以使用TextEncoder和TextDecoder?API?來進(jìn)行?GBK?編碼和解碼,也可以使用?encodeURIComponent?函數(shù)對(duì)字符串進(jìn)行編碼,最好使用第三方庫,比如iconv-lite來實(shí)現(xiàn)
    2023-12-12
  • JavaScript實(shí)現(xiàn)命名空間的多種方式

    JavaScript實(shí)現(xiàn)命名空間的多種方式

    隨著項(xiàng)目規(guī)模的不斷擴(kuò)大,如何有效地組織和管理代碼成為一個(gè)重要的課題,命名空間是解決這一問題的有效手段之一,它可以幫助我們避免全局變量污染,減少變量名沖突的問題,從而提高代碼的可維護(hù)性和模塊化程度,本文介紹了JavaScript實(shí)現(xiàn)命名空間的多種方式
    2024-11-11
  • 純javascript實(shí)現(xiàn)自動(dòng)發(fā)送郵件

    純javascript實(shí)現(xiàn)自動(dòng)發(fā)送郵件

    當(dāng)我們發(fā)送郵件時(shí)，可以自定義郵件發(fā)送的時(shí)間，那么使用代碼是如何實(shí)現(xiàn)的呢？下面通過本篇文章給大家介紹使用純javascript實(shí)現(xiàn)自動(dòng)發(fā)送郵件，感興趣的朋友可以參考下
    2015-10-10
  • JavaScript面向?qū)ο蠛诵闹R(shí)與概念歸納整理

    JavaScript面向?qū)ο蠛诵闹R(shí)與概念歸納整理

    這篇文章主要介紹了JavaScript面向?qū)ο蠛诵闹R(shí)與概念,整理總結(jié)了JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)中基本概念、原理與操作注意事項(xiàng),需要的朋友可以參考下
    2020-05-05

最新評(píng)論