用jQuery仿微博发布界面
程序员文章站
2022-04-03 18:01:06
...
当当当当,时隔这么久,我又回来了,今年给大家带来一个大家可能每天都要刷的微博网页版的仿制版,功能能实现,但是界面可能有些简陋,这就需要自己根据自己的爱好进行css设计了,下面开始贴代码。
HTML代码:
<div id="main">
<div id="form_box">
<h2>有什么新鲜事想告诉大家?</h2>
<textarea id="comment" cols="30" rows="10"></textarea>
<p>还可以输入<span id="count">340</span>个字 <button id="send">发布</button></p>
</div>
<div id="comment_box" >
</div>
</div>
CSS代码:
#main {
width: 980px;
margin: 0 auto;
}
#form_box {
padding: 20px;
margin-bottom: 20px;
border: 1px solid #cdcdcd;
}
#comment {
width: 100%;
}
#comment_box {
display: none;
padding: 20px;
border: 1px solid #cdcdcd;
}
#send {
float: right;
width:50px;
height: 30px;
background-color:orange;
border: none;
border-radius:9%;
}
js代码:
<script src="js/jquery-3.3.1.js"></script>
//这里我引入的是本地jQuery,其实可以用CDN引入知名网站的静态资源库,比如bootstrap等等
<script>
//监听文本框的输入事件
$(function(){
$('#comment').on('input propertychange',function(){
//改变span长度
$('#count').text(340 - $('#comment').val().length);
//判断输入长度是否大于340,若大于,则截取340个字
if ($('#comment').val().length>340) {
$('#comment').val($('#comment').val().substr(0,340));
alert('您已超过340个字');
};
});
});
//为按钮绑定点击事件
$('#send').click(function(){
//添加p元素
var $p = $('<p></p>').text($('#comment').val());
// console.log($p)
// 添加a元素
var $a = $('<a></a>').text('删除');
// console.log($a)
// 为a元素添加链接属性
$a.attr('href','javascript:;');
//使a元素右浮动
$a.css('float','right');
//将a元素插入p元素中
$p.append($a);
//给a元素添加点击事件
$a.click(function(){
//移除a的父元素
$a.parent().remove();
//若评论框没有元素,则将评论框隐藏
if ($('#comment_box').children().length == 0) {
$('#comment_box').hide();
};
});
//
if($('#comment_box').children().length == 0){
//如果评论框没有东西,则添加p,并显示评论框
$('#comment_box').append($p);
$('#comment_box').show();
}else{
//否则就添加p元素
$('#comment_box').append($p);
}
//将输入框清空,将可用字数返回340
$('#comment').val('');
$('#count').text('340');
});
最后给大家看看效果:
在超过340个字的时候就不能输入了,而且会弹出超过340个字。在点发布按钮之后会在下面出现刚刚输入的内容,大家可以复制代码,自己试试效果,下面是最后的效果图。
上一篇: Python特征分析- 相关性分析
下一篇: redis使用watch秒杀抢购实现思路