現在很多人都在用微博，微博成爲一種很普遍的分享，交流平臺，以至於養成了每天睜開眼睛第一件事情和每天晚上閉上眼睛之前最後一件事就是要刷微博。博主一般就是潛水，默默的刷別人的微博，以至於到現在我的粉絲依舊是9個，特別穩定~~搞得本寶寶很焦灼...（有想要關注我的，可以私信哦~嘻嘻）
好啦，廢話不多說，進入正題。。
（只是實現簡單的節點操作，做的不好勿噴~~~）
這個簡單的功能主要分爲三大部分：
第一部分：實現發佈前的驗證，只有標題和內容同時不爲空時，才能發佈成功。
這一部分較爲簡單，驗證函數如下：
function text(){
if(title.value == null || title.value == ''){
alert('請輸入標題');
return false;
}else if(content.value == null || content.value == ''){
alert(content.value);
alert('請輸入發佈內容');
return false;
}else {
return true;
}
}第二部分是發佈和刪除功能。
用戶點擊發布之後，創建新的節點，並且將標題和內容的值賦給新節點，並將節點插入。
用戶點擊刪除按鈕之後，將點擊的該span 傳給刪除函數，直接刪除這個元素的整個父節點 li
第三部分 是 微博內容的文本域的字數判定：
因爲我們要在用戶每輸入一個字之後就要判斷一次，所以一開始的我打算給textarea添加一個onchange事件，但是添加之後才發現，，文本域只有在失去焦點之後才後觸發onchange事件，所以，此路不通，只能另換方法。後來，我便改用了oninput事件，這個問題變迎刃而解啦~~後來聽別人說，用鍵盤事件可是可以滴，畢竟我們打字是需要按鍵盤的嘛~
在判斷字數的這個地方，還有一個小bug，就是如果我們一下複製粘貼好多文字的時候，他雖然會彈出警示框提醒超出上限，但是仍然會把文字輸入進文本域。就在我冥思苦想解決這個問題的時候，大神告訴我可以設置一個全局變量，在每一次oninput的最後，把現在文本域中的內容儲存起來，如果下次輸入的時候，超出字數，就把輸入框文字重置爲上一次的內容。。旁邊坐一個大神的好處就是有啥問題，大神分分鐘就給解決了，同樣，壞處就是，大神一語驚醒夢中人，自己就省事了，，少走了很多彎路，我覺得，對於我這樣的小白白，，還是要多走點彎路好~
突然發現這一段文字好多，身爲處女座的我感覺很不舒服，我們來放代碼~
html。css代碼
<style>
*{margin: 0;padding: 0;}
img{display: block;}
#content{overflow: hidden;margin-top:20px;position: relative;}
#main{float:right;margin-right: 50px;position: relative;}
#info{position: absolute;top:0px;right: 340px;opacity: 0;filter:alpha(opacity=0);display: none;}
#photo{position: absolute;display:block;width: 60px;height: 60px;top:43px;left:10px;border:1px solid #000;}
#photo:hover{border: 2px solid #30BDF5;}
</style>
</head>
<body>
<div id="content">
<div id="main">
<img src="img/qq1.jpg">
<span id="photo"></span>
</div>
<div id="info">
<img src="img/qq2.jpg">
</div>
</div>js代碼
<script>
var photo = document.getElementById("photo");
var info = document.getElementById("info");
var timer1= null,timer2=null,x= 0,y=0;
function show(){
timer1 = setInterval(function(){
x+=0.2;
if(x>=1) x=1;
info.style.opacity = x;
info.style.filter ='alpha(opacity:'+ x*100 +')';
y+=11;
if(y>=55) y=55;
info.style.top=y+'px';
},100);
}
function disappear(){
timer1 = setInterval(function(){
x-=0.2;
if(x<=0) {x=0;info.style.display='none';}
info.style.opacity = x;
info.style.filter ='alpha(opacity:'+ x*100 +')';
y-=20;
if(y<=0) y=0;
info.style.top=y+'px';
},100);
}
photo.onmouseenter = function(){
info.style.display='block';
info.style.opacity = 0;
clearInterval(timer1);
clearTimeout(timer2);
timer2 = setTimeout(function(){
show();
},700);
}
photo.onmouseleave = function(){
clearInterval(timer1);
clearTimeout(timer2);
timer2 = setTimeout(function(){
disappear();
},700);
}
info.onmouseenter = function(){
clearInterval(timer1);
clearTimeout(timer2);
}
info.onmouseleave = function(){
clearInterval(timer1);
clearTimeout(timer2);
timer2 = setTimeout(function(){
disappear();
},700);
}
</script>吃飯去咯~~~