gadget : jQuery实现发微博案例
2018-07-28 本文已影响25人
一苇一航
实现点击发送文本框中的内容到指定位置
用到jQuery方法 ：prepend() slideDown()
代码如下
html
<body>
<div id="box">
<textarea></textarea>
<button>start</button>
</div>
<ul>
</ul>
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="index.js"></script>
</body>
css
*{
margin: 0;
padding: 0;
}
body{
background: rgb(77, 159, 226);
}
/* box */
#box{
width: 700px;
margin: 50px auto 10px;
background: #ffffff;
padding: 10px;
box-sizing: border-box;
text-align: right;
border-radius: 5px;
}
#box textarea{
width: 680px;
height: 160px;
resize: none;
}
#box button{
width: 80px;
height: 30px;
}
/* ul */
ul{
width: 700px;
list-style: none;
margin: auto;
}
ul li{
line-height: 30px;
border-radius: 5px;
background: #ffffff;
box-sizing: border-box;
padding-left: 10px;
margin-bottom: 10px;
}
js
$(function(){
$('button').click(function(){
let val = $('#box textarea').val();
$('#box textarea').val('');
// console.log(val)
//当输入框为空时，不能发送
if(val !=''){
var ele ='<li>'+val+'</li>'
$('ul').prepend(ele);
$('ul li:first').hide().slideDown();
}else{
alert('请输入内容！')
}
})
})
