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

基于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ì)有所幫助。

相關(guān)文章

  • JavaScript隨機(jī)生成顏色的方法

    JavaScript隨機(jī)生成顏色的方法

    這篇文章主要介紹了JavaScript隨機(jī)生成顏色的方法的相關(guān)資料,非常不錯(cuò)，代碼簡(jiǎn)單易懂，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2016-10-10
  • 微信小程序?qū)崿F(xiàn)人臉識(shí)別登陸的示例代碼

    微信小程序?qū)崿F(xiàn)人臉識(shí)別登陸的示例代碼

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)人臉識(shí)別登陸的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • js實(shí)現(xiàn)簡(jiǎn)單鼠標(biāo)跟隨效果的方法

    js實(shí)現(xiàn)簡(jiǎn)單鼠標(biāo)跟隨效果的方法

    這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單鼠標(biāo)跟隨效果的方法,涉及javascript鼠標(biāo)事件與坐標(biāo)獲取等相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-04-04
  • JS改變頁(yè)面顏色源碼分享

    JS改變頁(yè)面顏色源碼分享

    本篇文章是JS的一個(gè)網(wǎng)頁(yè)制作小技巧，應(yīng)用在很多地方，通過(guò)JS改變HTML頁(yè)面的顏色，有興趣的學(xué)習(xí)下。
    2018-02-02
  • canvas繪制多邊形

    canvas繪制多邊形

    本文主要分享了利用canvas畫多邊形的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
    2017-02-02
  • Extjs表單輸入框異步校驗(yàn)的插件實(shí)現(xiàn)方法

    Extjs表單輸入框異步校驗(yàn)的插件實(shí)現(xiàn)方法

    這篇文章主要介紹了Extjs表單輸入框異步校驗(yàn)的插件實(shí)現(xiàn)方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2017-03-03
  • js為什么不能正確處理小數(shù)運(yùn)算？

    js為什么不能正確處理小數(shù)運(yùn)算？

    這篇文章主要介紹了js不能正確處理小數(shù)運(yùn)算的原因，為大家解除js為什么不能正確處理小數(shù)運(yùn)算的疑慮，感興趣的小伙伴們可以參考一下
    2015-12-12
  • 微信小程序如何監(jiān)聽(tīng)全局變量

    微信小程序如何監(jiān)聽(tīng)全局變量

    這篇文章主要給大家介紹了關(guān)于微信小程序如何監(jiān)聽(tīng)全局變量的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • Bootstrap組件系列之福利篇幾款好用的組件（推薦二）

    Bootstrap組件系列之福利篇幾款好用的組件（推薦二）

    這篇文章主要介紹了Bootstrap組件系列之福利篇幾款好用的組件（推薦二）的相關(guān)資料,需要的朋友可以參考下
    2016-07-07
  • JavaScript實(shí)現(xiàn)拖動(dòng)模態(tài)框

    JavaScript實(shí)現(xiàn)拖動(dòng)模態(tài)框

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)拖動(dòng)模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-07-07

最新評(píng)論