用jQuery仿微博发布界面

最新推荐文章于 2020-03-01 16:32:28 发布

原创最新推荐文章于 2020-03-01 16:32:28 发布 · 2.7k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

本文介绍了一个简单的微博网页版仿制品，使用HTML、CSS和JavaScript实现了基本的功能，如发布消息和字数限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当当当当，时隔这么久，我又回来了，今年给大家带来一个大家可能每天都要刷的微博网页版的仿制版，功能能实现，但是界面可能有些简陋，这就需要自己根据自己的爱好进行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个字。在点发布按钮之后会在下面出现刚刚输入的内容，大家可以复制代码，自己试试效果，下面是最后的效果图。