基於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程式設計有所幫助。

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務
