JavaScript仿微博發(fā)布信息案例
現(xiàn)在很多類似以微博發(fā)布動(dòng)態(tài)的效果,下面為一個(gè)用 JavaScript寫的小小的類似微博發(fā)布信息的案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博發(fā)布</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul { list-style: none; } .box { width: 600px; height: auto; border: 1px solid #ccc; margin: 100px auto; text-align: center; padding: 30px 0; background-color: rosybrown; } .box textarea { width: 450px; resize: none; /*設(shè)置文本不能過拖動(dòng)*/ } .box li { width: 450px; line-height: 30px; border-bottom: 1px dashed #ccc; margin-left: 80px; text-align: left; } .box li a { float: right; } </style> <script type="text/javascript"> window.onload = function (){ //獲取數(shù)組的第一個(gè) var btn = document.getElementsByTagName("button")[0]; var txt = document.getElementsByTagName("textarea")[0]; var ul = document.createElement("ul"); btn.parentNode.appendChild(ul); //添加子節(jié)點(diǎn) btn.onclick = function (){ //1.需要判斷文本中是否有內(nèi)容 if(txt.value == ""){ alert("親!內(nèi)容不能為空哦!!"); return false; //讓操作就在這個(gè)地方終止 } var newli = document.createElement("li"); //創(chuàng)建一個(gè)新的li標(biāo)簽 newli.innerHTML = txt.value +"<a href='javascript:;'>刪除</a>"; //給新的標(biāo)簽添加內(nèi)容,并拼接刪除已連接 ul.appendChild(newli); //清空輸入框 txt.value = ""; var aa = document.getElementsByTagName("a");//獲取所有的a標(biāo)簽 for(var i = 0;i<aa.length;i++){ // 遍歷點(diǎn)擊刪除 aa[i].onclick = function () { this.parentNode.remove(); } } } } </script> </head> <body> <div class="box"> 微博發(fā)布:<textarea name="" id="" cols="30" rows="10"></textarea> <button>發(fā)布</button> </div> </body> </html>
布局出來的樣式,點(diǎn)擊藍(lán)色的刪除鏈接,會(huì)刪除對應(yīng)的那一行內(nèi)容。
陌陌說:重要知識(shí)點(diǎn):獲取輸入框的數(shù)值,創(chuàng)建子節(jié)點(diǎn)和給子節(jié)點(diǎn)添加內(nèi)容,刪除對應(yīng)的節(jié)點(diǎn)。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
uni-app微信小程序登錄并使用vuex存儲(chǔ)登錄狀態(tài)的思路詳解
這篇文章主要介紹了uni-app微信小程序登錄并使用vuex存儲(chǔ)登錄態(tài)的思路,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11JavaScript實(shí)現(xiàn)抖音羅盤時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)抖音羅盤時(shí)鐘,特別實(shí)用的效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10javascript HTML+CSS實(shí)現(xiàn)經(jīng)典橙色導(dǎo)航菜單
這篇文章主要介紹了javascript HTML+CSS實(shí)現(xiàn)經(jīng)典橙色導(dǎo)航菜單的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02javascript實(shí)現(xiàn)的仿51job地址多項(xiàng)選擇方式效果
分享一個(gè)類似51job方式的地址選擇效果2009-12-12Javascript操縱Cookie實(shí)現(xiàn)購物車程序
Javascript操縱Cookie實(shí)現(xiàn)購物車程序...2007-02-02模擬javascript中的sort排序(簡單實(shí)例)
下面小編就為大家?guī)硪黄Mjavascript中的sort排序(簡單實(shí)例)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08JavaScript實(shí)現(xiàn)電商平臺(tái)商品細(xì)節(jié)圖
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)電商平臺(tái)商品細(xì)節(jié)圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06js導(dǎo)出Excel表格超出26位英文字符的解決方法ES6
下面小編就為大家?guī)硪黄猨s導(dǎo)出Excel表格超出26位英文字符的解決方法ES6。具有很好的參考價(jià)值。一起跟隨小編過來看看吧,希望對大家有所幫助2017-11-11