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