JavaScript簡(jiǎn)單實(shí)現(xiàn)的仿微博留言功能示例
更新時(shí)間：2019年01月17日 11:06:28 作者：黎成訶月
這篇文章主要介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)的仿微博留言功能,涉及javascript頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了JavaScript簡(jiǎn)單實(shí)現(xiàn)的仿微博留言功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微博留言</title>
</head>
<script>
window.onload=function(){
var text=document.getElementById('text');
var btn =document.getElementById('btn');
var oul =document.getElementsByClassName('content')[0];
btn.onclick=function(){
var oli= document.createElement('li')
oli.innerHTML=text.value;
var arr= document.getElementsByTagName('li');
if(arr.length>0){
oul.insertBefore(oli,arr[0])
}else{
oul.appendChild(oli)
}
}
}
</script>
<body>
<input type="text" placeholder="請(qǐng)輸入您的留言" id="text" />
<input type="button" value="留言" id="btn">
<ul class="content">
</ul>
</body>
</html>
使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行結(jié)果：
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js實(shí)現(xiàn)日期顯示的一些操作(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)日期顯示的一些操作(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
bootstrap是什么_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了bootstrap是什么，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要介紹了js 自動(dòng)播放的實(shí)例代碼，有需要的朋友可以參考一下2013-11-11
bootstrap-table組合表頭的實(shí)現(xiàn)方法
本篇文章主要介紹了bootstrap-table組合表頭的實(shí)現(xiàn)方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
JavaScript的事件綁定(方便不支持js的時(shí)候)
看了JavaScript DOM 編程藝術(shù)的Best Practices那章，才知道我們?cè)谥谱骶W(wǎng)頁(yè)的時(shí)候有很多東西需要考慮2013-10-10
本文主要介紹了基于jQuery實(shí)現(xiàn)的簡(jiǎn)單版鍵盤自動(dòng)打字效果，具有很好的參考價(jià)值，下面就跟著小編一起來(lái)看下吧2016-12-12
JS 設(shè)計(jì)模式之：?jiǎn)卫Ｊ蕉x與實(shí)現(xiàn)方法淺析
這篇文章主要介紹了JS 設(shè)計(jì)模式之：?jiǎn)卫Ｊ?結(jié)合實(shí)例形式分析了JS 單例模式原理、定義、實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05
Webpack 打包速度優(yōu)化是提升開(kāi)發(fā)效率和構(gòu)建效率的關(guān)鍵,以下是系統(tǒng)化的優(yōu)化方案,從基礎(chǔ)配置到高級(jí)技巧全面覆蓋,并通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2025-04-04
js實(shí)現(xiàn)WebSocket 連接的示例代碼
本文主要介紹了js實(shí)現(xiàn)WebSocket 連接的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
二級(jí)域名轉(zhuǎn)向類...2006-11-11