js运动8 简单发状态
2017-03-20 本文已影响0人
maomizone
- 发状态时判断内容是否为空
- 发布成功在状态栏里面有先下拉后透明度变大的效果
HTML (css样式忽略)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>发状态</title>
<script src="js/move2.js"></script>
</head>
<body>
<div>
<textarea id="txt" cols="40"></textarea>
<br/>
<button id="btn">发布</button>
</div>
<div>
<h2>状态栏</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("请输入");
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
