- 發(fā)狀態(tài)時(shí)判斷內(nèi)容是否為空
- 發(fā)布成功在狀態(tài)欄里面有先下拉后透明度變大的效果
HTML (css樣式忽略)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>發(fā)狀態(tài)</title>
<script src="js/move2.js"></script>
</head>
<body>
<div>
<textarea id="txt" cols="40"></textarea>
<br/>
<button id="btn">發(fā)布</button>
</div>
<div>
<h2>狀態(tài)欄</h2>
<ul id="ul"></ul>
</div>
</ul>
</body>
</html>
JS
<script>
window.onload = function(){
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
var ul = document.getElementById("ul");
var lis = ul.getElementsByTagName("li");
btn.onclick = function(){
if(txt.value.trim() == ""){
alert("請(qǐng)輸入");
return;
}
var li = document.createElement("li");
li.innerHTML = txt.value;
if(lis.length == 0){
ul.appendChild(li)
}else{
ul.insertBefore(li, lis[0]);
}
var iHeight = li.offsetHeight;
li.style.height = 0;
move(li,{height: iHeight}, function(){
move(li, {opacity: 100});
})
}
}
</script>
效果
jsSport9.gif
