js實(shí)現(xiàn)微博發(fā)布小功能
更新時(shí)間：2017年01月12日 16:54:00 作者：春風(fēng)十里
本篇文章主要介紹了javascript實(shí)現(xiàn)微博發(fā)布小功能的示例代碼，具有一定的參考價(jià)值，下面跟著小編一起來看下吧
微博發(fā)布功能，可發(fā)布可刪除。樣式?jīng)]設(shè)置忽略，主要知識(shí)點(diǎn)及注意點(diǎn)：
1、動(dòng)態(tài)添加節(jié)點(diǎn)標(biāo)簽。
2、內(nèi)容為空時(shí)不能發(fā)布。
3、新發(fā)布的內(nèi)容要在上面。
4、內(nèi)容刪除要同時(shí)刪除掉節(jié)點(diǎn)。
5、為保持樣式輸入框要設(shè)置為不可拖拽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {margin: 0;padding: 0;}
.box{
border: 1px solid #000;
width: 600px;
height: auto;
margin:100px auto;
padding:30px 0;
}
textarea{
width: 450px;
resize:none;
margin-left: 20px;
}
ul li{
width: 450px;
list-style: none;
border-bottom: 1px dotted #ccc;
margin-left:20px;
line-height: 30px;
color: #333;
}
ul li a{
float: right;
font-size: 12px;
}
</style>
<script src="../jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// 方法1
window.onload = function () {
var box = document.getElementById("box");
var boys=box.children;
var ul = document.createElement("ul");
box.appendChild(ul);
boys[2].onclick = function (){
if(boys[1].value==""){
alert("輸入不能為空");
return;
}
var newli= document.createElement("li");
newli.innerHTML=boys[1].value+"<a href='javascript:;'>刪除</a>";
boys[1].value ="";
var lis=ul.children;
if(lis.length==0){ul.appendChild(newli);}else{
ul.insertBefore(newli, lis[0]);
}
var as=document.getElementsByTagName("a");
for (var i=0;i<as.length;i++){
as[i].onclick=function(){
ul.removeChild(this.parentNode);
}
}
}
}
// 方法2 引用jQuery
// $(function(){
// $("<ul></ul>").appendTo("#box");
// var $text = $("#box").find("textarea");
// var $btn = $("#box").find("button");
// $btn.on("click",function(){
// if($text.val() ==""){
// alert("請(qǐng)輸入內(nèi)容");
// return;
// }
// $("ul").prepend("<li>"+$text.val()+"<a href='javascript:;'>刪除</a></li>");
// $text.val("");
// $("a").on("click",function(){
// $(this).parent("li").remove();
// })
// })
// })
</script>
</head>
<body>
<div class="box" id="box">
微博發(fā)布：</br><textarea cols="30" rows="10"></textarea>
<button>發(fā)布</button>
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
等待指定時(shí)間后自動(dòng)跳轉(zhuǎn)或關(guān)閉當(dāng)前頁面的js代碼
本文為大家詳細(xì)介紹下如何通過js實(shí)現(xiàn)等待指定時(shí)間后自動(dòng)跳轉(zhuǎn)或關(guān)閉當(dāng)前頁面的腳步代碼，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
js實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)圖片滾動(dòng)停止的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)圖片滾動(dòng)停止的方法,可實(shí)現(xiàn)js滾動(dòng)特效中的鼠標(biāo)懸停停止圖片滾動(dòng)的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
因?yàn)橐鲆粋€(gè)日歷控件,遇到國家法定節(jié)假日,怎么實(shí)現(xiàn)此功能呢？其實(shí)實(shí)現(xiàn)代碼很簡(jiǎn)單的,下面小編給大家分享js判斷節(jié)假日實(shí)例代碼,需要的朋友參考下吧2017-12-12
這篇文章主要為大家介紹了JavaScript的定時(shí)器 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
javascript簡(jiǎn)單實(shí)現(xiàn)跟隨滾動(dòng)條漂浮的返回頂部按鈕效果
這篇文章主要介紹了javascript簡(jiǎn)單實(shí)現(xiàn)跟隨滾動(dòng)條漂浮的返回頂部按鈕效果,涉及javascript基于onscroll事件動(dòng)態(tài)改變頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-08-08
解決ie6下png透明的問題想必前端都比較清楚，雖然有很多方法，但是我覺得用JS還是最省事的方法，不管是圖片還是背景圖片都OK。2013-08-08
JsRender for index循環(huán)索引用法詳解
這篇文章主要介紹了JsRender for index循環(huán)索引用法,以實(shí)例形式詳細(xì)分析了JsRender中循環(huán)的用法,需要的朋友可以參考下2014-10-10
這篇文章主要為大家介紹了JS中常見編碼及加密方式解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
本篇文章我們從面包屑導(dǎo)航的樣式，面包屑導(dǎo)航的代碼等方面詳細(xì)給大家分析了它的作用和設(shè)計(jì)技巧，如果你有這方便的需要，學(xué)習(xí)參考下吧。2017-12-12
現(xiàn)代配置YAML對(duì)比JSON優(yōu)勢(shì)分析
這篇文章主要為大家介紹了關(guān)于現(xiàn)代配置指南中YAML對(duì)比JSON的優(yōu)勢(shì)分析說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2022-02-02