js編寫(xiě)簡(jiǎn)單的聊天室功能

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:32:37

js編寫(xiě)簡(jiǎn)單的聊天室功能

js編寫(xiě)簡(jiǎn)單的聊天室功能:這個(gè)聊天室寫(xiě)的特別簡(jiǎn)易，比較適合剛開(kāi)始學(xué)習(xí)js的同學(xué)借鑒，當(dāng)然，寫(xiě)的不好，也希望諸位大神可以進(jìn)行批評(píng)改正。聊天室要求： 1.不能發(fā)空消息 2.敏感字***顯示 3.圖片替換開(kāi)心，尷尬 4.顯示聊天內(nèi)容和時(shí)間 5.每發(fā)一條信息，隨機(jī)顯示名稱(chēng)，先把一些名稱(chēng)定義

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀js編寫(xiě)簡(jiǎn)單的聊天室功能:這個(gè)聊天室寫(xiě)的特別簡(jiǎn)易，比較適合剛開(kāi)始學(xué)習(xí)js的同學(xué)借鑒，當(dāng)然，寫(xiě)的不好，也希望諸位大神可以進(jìn)行批評(píng)改正。聊天室要求： 1.不能發(fā)空消息 2.敏感字***顯示 3.圖片替換開(kāi)心，尷尬 4.顯示聊天內(nèi)容和時(shí)間 5.每發(fā)一條信息，隨機(jī)顯示名稱(chēng)，先把一些名稱(chēng)定義

這個(gè)聊天室寫(xiě)的特別簡(jiǎn)易，比較適合剛開(kāi)始學(xué)習(xí)js的同學(xué)借鑒，當(dāng)然，寫(xiě)的不好，也希望諸位大神可以進(jìn)行批評(píng)改正。

聊天室要求：

1.不能發(fā)空消息
2.敏感字***顯示
3.圖片替換開(kāi)心，尷尬
4.顯示聊天內(nèi)容和時(shí)間
5.每發(fā)一條信息，隨機(jī)顯示名稱(chēng)，先把一些名稱(chēng)定義到array里面

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style type="text/css"> 
 *{ 
 box-sizing: border-box; 
 } 
 .left{ 
 float: left; 
 width: 20%; 
 height: 650px; 
 color: red; 
 border: 1px solid red; 
 border-right: 20px solid cornflowerblue; 
 } 
 .center{ 
 position: relative; 
 float: left; 
 width: 60%; 
 height: 650px; 
 border: 1px solid darkcyan; 
 } 
 .chatList{ 
 width: 100%; 
 height: 500px; 
 overflow-y: scroll; 
 } 
 .bottom{ 
 position: absolute; 
 width: 100%; 
 height: 150px; 
 left: 0; 
 bottom: 0; 
 background: skyblue; 
 } 
 .bottom textarea{ 
 width: 70%; 
 height: 100%; 
 font-size: 18px;; 
 vertical-align: middle; 
 border: 1px solid red; 
 background: blanchedalmond; 
 } 
 .bottom input{ 
 width: 80px; 
 height: 40px; 
 margin-left: 30px; 
 } 
 .right{ 
 float: right; 
 color: #000000; 
 border-right: 0; 
 border-left: 20px solid cornflowerblue; 
 } 
 </style> 
 </head> 
 <body onload="loadTime()"> 
 <div class="left" id="left"> 
 
 </div> 
 <div class="center" id="center"> 
 <div class="chatList" id="chatList"> 
 
 </div> 
 <div class="bottom"> 
 <textarea id="content" name="content" ></textarea> 
 <input type="button" name="send" id="send" value="點(diǎn)擊發(fā)送" onclick="sendMessage()" /> 
 </div> 
 </div> 
 <div class="left right"> 
 <p>1.不能發(fā)空消息</p> 
 <p>2.敏感字***顯示</p> 
 <p>3.圖片替換 開(kāi)心，尷尬</p> 
 <p>4.顯示聊天內(nèi)容和時(shí)間</p> 
 <p>5.每發(fā)一條信息，隨機(jī)顯示名稱(chēng)，先把一些名稱(chēng)定義到array里面</p> 
 </div> 
 
 </body> 
 <script type="text/javascript"> 
// document.getElementById("chatList").scrollHeight; 
 /* 
 添加敏感字替換成**---8.10 
 * */ 
 function loadTime(){ 
 var time = new Date(); 
 
 var hours = (time.getHours()).toString(); 
 if(hours.length < 2){ 
 hours = "0" + hours; 
 } 
 var minutes = (time.getMinutes()).toString(); 
 if(minutes.length < 2){ 
 minutes = "0" + minutes; 
 } 
 var seconds = (time.getSeconds()).toString(); 
 if(seconds.length < 2){ 
 seconds = "0" + seconds; 
 } 
 var timeReturn = hours + ":" + minutes + ":" + seconds; 
 document.getElementById("left").innerHTML = timeReturn; 
 return timeReturn; 
 } 
 setInterval("loadTime()",1000); 
 var chatContents = ""; 
 var count = 0; 
 function sendMessage(){ 
 //通過(guò)調(diào)用randomName()函數(shù)來(lái)得到一個(gè)隨機(jī)的名字 
 var name = randomName(); 
 //通過(guò)調(diào)用randomColor()函數(shù)來(lái)得到一個(gè)隨機(jī)的顏色 
 var colorR = randomColor(); 
 //得到textarea中的內(nèi)容 
 var content = document.getElementById("content").value; 
 //判斷輸入內(nèi)容是否為空 
 if (content == "") { 
 alert("輸入內(nèi)容不能為空！！！"); 
 return; 
 } 
 //通過(guò)正則表達(dá)式來(lái)獲取要替換的字符串 
 var regExp = /藏獨(dú)|臺(tái)獨(dú)|傻逼|你大爺/g; 
 var regExp1 = /開(kāi)心/g; 
 var regExp2 = /尷尬/g; 
// var imgReplace = content.replace(regExp,"高興"); 
 //獲取開(kāi)心圖片路徑 
 var path1 = '<img src="img/chui.png"/>'; 
 //獲取尷尬圖片的路徑 
 var path2 = '<img src="img/mouse.png"/>'; 
 //敏感字替換； 
 content = content.replace(regExp,"***"); 
 //將開(kāi)心替換成開(kāi)心圖片的字符串； 
// txtReplace(content); 
 var imgReplace = content.replace(regExp1,path1); 
// alert(imgReplace); 
 //將尷尬替換成尷尬圖片的字符串； 
 imgReplace = imgReplace.replace(regExp2,path2); 
// alert(imgReplace); 
 var chatContent = "<span>"+ name + ":" + "</span>" + " " + imgReplace; 
// 字符串拼接聊天記錄 
 chatContents =chatContents + chatContent + " " + loadTime() +"<br/>"; 
 document.getElementById("chatList").innerHTML = chatContents; 
 //點(diǎn)擊發(fā)送后，textarea中的內(nèi)容設(shè)為空 
 document.getElementById("content").value = ""; 
 var txtColor = document.getElementsByTagName("span")[count]; 
 count++; 
 //設(shè)置span的隨機(jī)顏色 
 txtColor.style.color = colorR; 
 } 
 function randomName(){ 
 var i = parseInt(Math.random() * (6 - 0 + 1) + 0); 
 var arrName = new Array("果果","六六","格格","明明","小花","蘭蘭","花花"); 
 return arrName[i]; 
 } 
 function randomColor(){ 
 var r = parseInt(Math.random() * (255 - 0 + 1) + 0).toString(16); 
 if(r.length < 2){ 
 r = "0" + r; 
 } 
 var g = parseInt(Math.random() * (255 - 0 + 1) + 0).toString(16); 
 if(g.length < 2){ 
 g = "0" + g; 
 } 
 var b = parseInt(Math.random() * (255 - 0 + 1) + 0).toString(16); 
 if(b.length < 2){ 
 b = "0" + b; 
 } 
 return "#" + r + g + b; 
 } 
 
 </script> 
</html>

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js編寫(xiě)簡(jiǎn)單的聊天室功能

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：功能簡(jiǎn)易簡(jiǎn)單

熱門(mén)焦點(diǎn)

js編寫(xiě)簡(jiǎn)單的聊天室功能

js編寫(xiě)簡(jiǎn)單的聊天室功能

js編寫(xiě)簡(jiǎn)單的聊天室功能

最新推薦

猜你喜歡

熱門(mén)推薦