JavaScript實(shí)現(xiàn)QQ聊天消息展示和評(píng)論提交功能
更新時(shí)間：2017年05月22日 08:51:46 作者：清風(fēng)明月000
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)QQ聊天消息展示和評(píng)論提交功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
QQ聊天消息顯示，提交評(píng)論等實(shí)現(xiàn)原理，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.bos {
margin: 100px auto;
width: 350px;
position: relative;
}
.bos a {
float: right;
}
button {
position: relative;
left: 301px;
bottom: 0;
}
textarea {
width: 350px;
resize: none;
}
ul li {
list-style: none;
}
</style>
<script type="text/javascript">
window.onload = function() {
var txt = document.getElementById('txt');
var btn = document.getElementsByTagName('button')[0];
var oUl = document.getElementsByTagName('ul')[0];
btn.onclick = function() {
if(txt.value == '') {
alert('請(qǐng)輸入...');
return false; //結(jié)束事件*******
}
var newli = document.createElement('li'); //創(chuàng)建標(biāo)簽<li></li>
newli.innerHTML = txt.value + '<a href = "#">刪除<a>';
//oUl.appendChild(newli); //將創(chuàng)建標(biāo)簽<li></li>加到最后面
var lis = oUl.childNodes; //oUl.children
oUl.insertBefore(newli, lis[0]); //將創(chuàng)建標(biāo)簽<li></li>加到最前面
txt.value = '';
//刪除發(fā)出去的消息
var oA = document.getElementsByTagName('a');
for(var i = 0; i < oA.length; i++) {
oA[i].onclick = function() {
oUl.removeChild(this.parentNode);
}
}
}
}
</script>
</head>
<body>
<div id="box" class="bos">
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<button>submit</button>
<ul></ul>
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
JS腳本加載后執(zhí)行相應(yīng)回調(diào)函數(shù)的操作方法
本文主要講解怎么在成功加載 js 文件后再執(zhí)行相應(yīng)回調(diào)任務(wù),對(duì)JS腳本加載后執(zhí)行相應(yīng)回調(diào)函數(shù)的操作方法感興趣的朋友，通過(guò)本文學(xué)習(xí)下吧2018-02-02
第一次接觸神奇的Bootstrap表單，Bootstrap讓W(xué)eb開(kāi)發(fā)更迅速、更簡(jiǎn)單，感興趣的小伙伴們可以參考一下2016-07-07
基于JavaScript判斷兩個(gè)對(duì)象內(nèi)容是否相等
這篇文章主要介紹了基于JavaScript判斷兩個(gè)對(duì)象內(nèi)容是否相等,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
JS簡(jiǎn)單實(shí)現(xiàn)獲取元素的封裝操作示例
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)獲取元素的封裝操作,結(jié)合實(shí)例形式分析了JS針對(duì)頁(yè)面ID、class、TAG元素獲取的函數(shù)與對(duì)象封裝操作實(shí)現(xiàn)方法,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)俄羅斯方塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10 
eval函數(shù)會(huì)將 obj 當(dāng)做代碼去執(zhí)行一遍，下面舉個(gè)例子為大家詳細(xì)介紹下具體的使用方法，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-07-07 
小程序選項(xiàng)卡以及swiper套用（跨頁(yè)面）
這篇文章主要為大家詳細(xì)介紹了小程序選項(xiàng)卡以及swiper套用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06 
保證JavaScript和Asp、Php等后端程序間傳值編碼統(tǒng)一
在WEB開(kāi)發(fā)過(guò)程中，前后端要求數(shù)據(jù)編碼一致的處理是經(jīng)常會(huì)碰到的！
2009-04-04 
淺談JS 數(shù)字和字符串之間相互轉(zhuǎn)化的糾紛
下面小編就為大家?guī)?lái)一篇淺談JS 數(shù)字和字符串之間相互轉(zhuǎn)化的糾紛。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10