发布新闻和字数限制_PHP中文网手记

摘要：<!DOCTYPE html> <html> <head> <title>发布新闻</title> <link rel="icon" href="static/front page/favicon.ico"> <link r
<!DOCTYPE html>
<html>
<head>
	<title>发布新闻</title>
		<link rel="icon" href="static/front page/favicon.ico">
	<link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="static/front page/static/css/style.css">
	<link rel="stylesheet" type="text/css" href="static/front page/static/font-awesome/css/font-awesome.min.css">
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		li{list-style:none;float: left;}
		ul{margin: 0!important}
		body{font-size: 14px;}
		a{text-decoration: none!important}
		.fl{float: left;}
		.fr{float: right;}
		.clear{clear: both;}
		/*外边距*/
		.mr_30{margin-right: 30px;}
		.mr_20{margin-right: 20px;}
		.mt_20{margin-top: 20px;}
		.mt_10{margin-top: 10px;}
		/*内边距*/
		.p_20{padding: 20px;}

		/*边框*/
		.br{border-right: 1px solid #ccc;padding-right: 10px;}
		.bb{border-bottom: 1px solid #eee!important}
		.check{color: #ed4040;border-bottom: 2px solid #ed4040;height: 44px;line-height: 44px;}

		/*新闻栏 news*/
		.news{width: 660px;margin-left: 140px;}
		.msg{width: 100%;border: 1px solid #eee;}
		.msg_title{height: 45px;line-height: 45px;}
		.msg_title li{margin-left: 20px;font-size: 15px;}
		.msg_text{position: relative;}
		.text{position: absolute;bottom: 10px;right: 10px; color: #fff;background-color: #7a7a7b;padding: 0 5px;border-radius: 20px;}
		.msg_text textarea{width: 100%;height: 100px;display: block;padding: 15px;border: 0;resize: none;outline: none;background-color: #f4f5f6;}
		.msg_list{height: 40px;line-height: 40px;}
		.msg_list span{color: #888;margin-left: 20px;float: left;}
		.msg_list span i{float: left;font-size: 23px;margin: 8px 5px 0 0;}
		.msg_list button{width: 120px;height: 100%;background-color: #ed4040;color: #fff;border-radius: 0;}

	</style>
</head>
<body>
	<div class="news  mr_30 fl">
		<div class="msg">
			<ul class="msg_title bb" id="msg_title">
				<li class="check" onclick="a(0)">发布图文</li>
				<li onclick="a(1)">发布视屏</li>
				<li onclick="a(2)">发布问答</li>
			</ul>
			<div class="msg_table" id="table">
				<div class="msg_text">
					<textarea placeholder="有什么新鲜事要高数大家" class="bb"></textarea>
					<span class="text"><span class="num">0</span>/2000字</span>
				</div>
				<div class="msg_list">
					<span><i class="fa fa-image" style="color: #ed4040"></i>添加图片</span>
					<span><i class="fa fa-square-o big"></i>发布长文</span>
					<span><img src="static/images/a.png"></span>
					<button class="fr btn disabled">发布</button>
				</div>
			</div>
			<div class="msg_table" style="display: none;">
				<div class="msg_text">
					<textarea placeholder="视频标题" class="bb"></textarea>
					<span class="text"><span class="num">0</span>/30字</span>
				</div>
				<div class="msg_list">
					<span><i class="fa fa-vidie-camera"></i>添加视频</span>
					<button class="fr btn disabled">发布</button>
				</div>
			</div>
			<div class="msg_table" style="display: none;">
				<div class="msg_text">
					<textarea placeholder="有什么新鲜事要高数大家" class="bb"></textarea>
					<span class="text"><span class="num">0</span>/2000字</span>
				</div>
				<div class="msg_list">
					<span><i class="fa fa-image" style="color: #ed4040"></i>添加图片</span>
					<span><i class="fa fa-square-o big"></i>更多回答</span>
					<button class="fr btn disabled">发布</button>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
			//tab切换;
 	var title=document.getElementById('msg_title').getElementsByTagName('li');
 	var table=document.getElementsByClassName('msg_table');
	 function a(index){
	 	for(var i=0;i<title.length;i++){
	 		table[i].style.display=' none';
	 		title[i].className=''
	 		if (index==i) {
	 			table[i].style.display=' none';
	 			title[i].className='check'
	 			table[i].style.display= 'block';
	 			// $('.num').text('0');	//点击后将当前文本框字数返回到0;与下面文本输入字数1一起使用;
	 		}
	 	}
	 }

	 //添加新闻
	 $(document).on('click','.btn',function(){
	 	//获取文本框里的内容;
	 	var texts=$(this).parents('.msg_table').find('textarea').val();
	 	if (texts.length>5) {
	 		$('.msg').after("<div class='new_list bb'><div class='fl ' style='width: 100%; '><a href='' class='strong'>"+texts+"</a><p class='mt_10'><span class='blue'>时政</span><span><img src='static/front page/static/images/a.jpg' width='18px;'>新闻网</span><span>人评论</span><span>时间</span><span class='fa fa-close remove fr'>a</span><span class='fr move' style='display: none;'>不感兴趣</span></p></div><div class='clear'></div></div>");
	 		$(this).parents('.msg_table').find('textarea').val("")	//清空文档
	 		$(this).parents('.msg_table').find('.num').text('0');	//字数清空;
	 		$(this).addClass('disabled')	//让按钮失去焦点;
	 	}else{
	 		$(this).addClass('disabled')
	 	}
	 
	 })
 	
 	// 发布长文
	$(function(){
		$('.big').click(function(){
			if ($(this).hasClass('fa fa-square-o')) {
				$(this).attr('class','fa fa-check-square').css('color','#ed4040');
				$(this).parents('.msg_table').find('textarea').stop().animate({height:'300'},1000)
			}else{
				$(this).attr('class','fa fa-square-o').css('color','#ed4040');
				$(this).parents('.msg_table').find('textarea').stop().animate({height:'100'},1000)
			}
		})
	})

// 文本输入字数
$(document).on('keyup','textarea',function(){
	//获取输入文本框里内容的长度
	var len=$(this).val().replace(/\s/g,"").length;
		//当前为文本框,找到父级,然后在找到下级需要改变的class;
		$(this).parents('.msg_table').find('.num').text(len)
		if (len==0) {
			$(this).parents('.msg_table').find('.num').text('0');
			$(this).parents('.msg_table').find('.btn').addClass('disabled')
		}else{
			$(this).parents('.msg_table').find('.btn').removeClass('disabled')
		}
})

	</script>
</body>
</html>
批改老师：查无此人批改时间：2019-04-16 09:58:03
老师总结：完成的不错。每行js代码结束后，增加;号。你的作业有的加了，有的没加。继续加油。
发布新闻和字数限制

热门词条
