首頁 > 開發者 > JavaScript
基於javascript製作聊天面板，javascript聊天面板
本文執行個體分享了javascript製作聊天面板的相關代碼，具體內容如下
先吧
點擊頭像更換說話對象，簡單說下實現原理，html中建立一個ul用於存放所有說話的內容，對話內容是有javascript 動態產生，
主要痛點：先布局好css，當時奧巴馬發送時候，讓這個li有浮動，當是小胖時候，讓這個li左浮動。
代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>類比簡訊發送</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; //用來累加改變左右浮動 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('發送內容不可為空'); }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="說點什麼吧..."> <span id="btn">發送</span> </div> </div></body></html>
希望本文所述對大家學習javascript程式設計有所協助。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
