今天看了幾個JS的視頻，老師布置了一個編寫一個簡易聊天對話框的任務，沒有涉及到Ajax.主要實現了切換頭像模擬兩方的聊天情況，樣式比較簡單，后期可以進行美化。
需要注意的地方是我是用的ul li列表來實現元素的添加，這樣更利于樣式的設置，每添加一個對話框需要清除一下浮動，不然會出現連續幾個對話框出現在一行的現象。
代碼如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>聊天對話框</title><style type="text/css">#container{width: 250px;height: 350px;border:1px solid #7b6b6b;margin: 0 auto;position: relative;}#content{width: 250px;height: 300px;border-bottom: 1px solid #ccc;overflow-y: auto;}#content ul{margin: 0;padding: 0;}#Img{width: 30px;height: 30px;position: absolute;left: 10px;top: 310px;border-radius: 15px;}#txt{margin: 0;position: absolute;left: 50px;top: 315px;border-radius: 2px;border:1px solid #ccc;width: 133px;height: 18px;}#btn{margin-right: 10px;position: absolute;margin: 0;left: 197px;top: 314px;}#edit{background: #ece7e766;width: 250px;height: 50px;}.showTxt{width: auto;height: auto;max-width: 230px;background: #008000a8;border:0;font-size: 15px;color: white;padding: 5px;border-radius: 2px; word-break: break-all;list-style: none;margin-top: 5px;display: list-item;}.left{text-align: left;margin-left: 50px;float: left;}.right{text-align: right;margin-right: 50px;float: right;}.showImg{width: 26px;height: 26px;border-radius: 13px; }.leftImg{left: 10px;position: absolute;}.rightImg{right: 10px;position: absolute;}#scroll{position: relative;}</style></head><body><div id="container"><div id="content"><div id="scroll"><ul id="save"></ul></div></div><div id="edit"><img src="1.jpg" id="Img"><input type="text" name="" id="txt"><input type="button" name="" value="發送" id="btn"></div></div><script type="text/javascript"> //獲取元素var oCont=document.getElementById('content');var oImg=document.getElementById('Img');var oTxt=document.getElementById('txt');var oBtn=document.getElementById('btn');var oSTxt=document.getElementsByClassName('showTxt');var oSave=document.getElementById('save');var num=0; //切換頭像oImg.οnclick=function(){num++;if(num%2==0)oImg.src='1.jpg';elseoImg.src='2.jpg';} //發送事件oBtn.οnclick= function(){addCon();}function addCon(){ //定義需要添加的元素var newLi=document.createElement("li");var newImg=document.createElement('img');//判斷聊天的對象是哪一方，文字框出現在左邊還是右邊 if(num%2==0){//添加對話框newLi.innerHTML=oTxt.value;newLi.className='showTxt right';oSave.appendChild(newLi); oTxt.value=''; //添加頭像newImg.src=oImg.src;newImg.className='showImg rightImg';newLi.appendChild(newImg); //清除浮動var div = document.createElement('div'); div.style = 'clear:both'; oSave.appendChild(div); }else{ newLi.innerHTML=oTxt.value;newLi.className='showTxt left';oSave.appendChild(newLi); oTxt.value='';newImg.src=oImg.src;newImg.className='showImg leftImg';newLi.appendChild(newImg);var div = document.createElement('div'); div.style = 'clear:both'; oSave.appendChild(div); }}</script></body></html>
新聞熱點
疑難解答
圖片精選
