abstract：<!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>
Correcting teacher：查无此人Correction time：2019-04-16 09:58:03
Teacher's summary：完成的不错。每行js代码结束后，增加;号。 你的作业有的加了，有的没加。继续加油。