摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.box{
width: 600px;height: 160px;border:8px solid pink;margin: 0 auto;
}
.box .top div{
float: right;
}
.top{
margin:10px 10px 3px 10px;
}
.text{
font-size: 15px;
color:#797676;
}
.text span{
font-size: 16px;
font-weight: bold;
}
.textarea{
width: 570px;
height: 85px;
margin:0 15px;
border:2px solid #A6C8FF;
}
.bottom span{
width: 55px;
height: 20px;
text-align: right;
margin: 0;
font-size: 12px;
display: inline-block;
}
.to{
float: right;
}
.bottom #sp1{
background:url('/image/images/images/an5.png') no-repeat left center;
}
.bottom #sp2{
background:url('/image/images/images/an4.png') no-repeat left;
}
.bottom #sp3{
background:url('/image/images/images/an3.png') no-repeat left;
}
.bottom #sp4{
background:url('/image/images/images/an2.png') no-repeat left;
}
.bottom #sp5{
background:url('/image/images/images/an1.png') no-repeat left;
}
</style>
</head>
<body>
<div class="box">
<div class="top">
<img src="image/images/images/12.png">
<div class="text">还可以输入<span class="number">150</span>字</div>
</div>
<div class="textarea" contenteditable="true"></div>
<div class="bottom">
<span id="sp1" style="margin-left:10px;">表情</span>
<span id="sp2">图片</span>
<span id="sp3">视频</span>
<span id="sp4">话题</span>
<span id="sp5">长微博</span>
<div class="to">
<span style="text-align:left;color:darkgray;">公开</span>
<button class="btn" style="background:#FFC09F;width:80px;height:30px;border-radius:6px;">发布</button>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('.textarea').keyup(function(){
var x=150-($(this).text().length)
$('.number').text(""+x+"")
})
$('.btn').click(function(){
if($('.textarea').text().length==0){
alert("请输入内容！")
}else{
$('.textarea').text(" ")
$('.number').text(""+150+"")
}
})
})
</script>
</body>
</html>
总结：编程不是看懂了就可以，要不断地练习才行！不然跟着老师做一遍，自己再做的时候还是会忘，不知道从哪里下手！
批改老师：韦小宝批改时间：2019-02-01 09:33:39
老师总结：写的很不错 最后的一句总结也是大实话 不练习是学不好编程的
