js編寫簡單的聊天室功能

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

js編寫簡單的聊天室功能

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

推薦度：

點擊下載本文 文檔為doc格式

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

這個聊天室寫的特別簡易，比較適合剛開始學(xué)習(xí)js的同學(xué)借鑒，當然，寫的不好，也希望諸位大神可以進行批評改正。

聊天室要求：

1.不能發(fā)空消息
2.敏感字***顯示
3.圖片替換開心，尷尬
4.顯示聊天內(nèi)容和時間
5.每發(fā)一條信息，隨機顯示名稱，先把一些名稱定義到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="點擊發(fā)送" onclick="sendMessage()" /> 
 </div> 
 </div> 
 <div class="left right"> 
 <p>1.不能發(fā)空消息</p> 
 <p>2.敏感字***顯示</p> 
 <p>3.圖片替換 開心，尷尬</p> 
 <p>4.顯示聊天內(nèi)容和時間</p> 
 <p>5.每發(fā)一條信息，隨機顯示名稱，先把一些名稱定義到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(){ 
 //通過調(diào)用randomName()函數(shù)來得到一個隨機的名字 
 var name = randomName(); 
 //通過調(diào)用randomColor()函數(shù)來得到一個隨機的顏色 
 var colorR = randomColor(); 
 //得到textarea中的內(nèi)容 
 var content = document.getElementById("content").value; 
 //判斷輸入內(nèi)容是否為空 
 if (content == "") { 
 alert("輸入內(nèi)容不能為空?。?！"); 
 return; 
 } 
 //通過正則表達式來獲取要替換的字符串 
 var regExp = /藏獨|臺獨|傻逼|你大爺/g; 
 var regExp1 = /開心/g; 
 var regExp2 = /尷尬/g; 
// var imgReplace = content.replace(regExp,"高興"); 
 //獲取開心圖片路徑 
 var path1 = '<img src="img/chui.png"/>'; 
 //獲取尷尬圖片的路徑 
 var path2 = '<img src="img/mouse.png"/>'; 
 //敏感字替換； 
 content = content.replace(regExp,"***"); 
 //將開心替換成開心圖片的字符串； 
// 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; 
 //點擊發(fā)送后，textarea中的內(nèi)容設(shè)為空 
 document.getElementById("content").value = ""; 
 var txtColor = document.getElementsByTagName("span")[count]; 
 count++; 
 //設(shè)置span的隨機顏色 
 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)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js編寫簡單的聊天室功能

推薦度：

點擊下載本文 文檔為doc格式

標簽：功能簡易簡單

熱門焦點

js編寫簡單的聊天室功能

js編寫簡單的聊天室功能

js編寫簡單的聊天室功能

最新推薦

猜你喜歡

熱門推薦