摘要：<!DOCTYPE html><html> <head> &nbs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
<title>微博輸入字數(shù)</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;}
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}
.blog{margin:30px auto;padding:10px;border:8px solid pink;width:500px;}
.title{width:100%;height:30px;line-height: 30px;}
.text{width:100%;height:100px;}
.bottom{margin:10px auto;}
.bottom span{margin-right:10px;}
.btn{width:70px;}
</style>
</head>
<body>
<div class="blog">
<div class="title"><span class="fl">有什么新鮮事想告訴大家</span><span class="fr">還可以輸入<span id="num">200</span>字</span></div>
<div class="clear"></div>
<div>
<textarea class="text"></textarea>
</div>
<div class="bottom">
<span><i class="fa fa-user" style="color:pink"></i> 表情</span>
<span><i class="fa fa-image" style="color:red"></i> 圖片</span>
<span><i class="fa fa-video-camera" style="color:blue"></i> 視頻</span>
<span><i class="fa fa-coffee"></i> 話題</span>
<span><i class="fa fa-keyboard-o"></i> 長微博</span>
<span style="margin-left:70px">公開</span>
<button class="fr btn" disabled="disabled">發(fā)布</button>
</div>
</div>
<script>
$(function(){
$('.text').keyup(function(){
$textlen=$(this).val().length;
$stextlen=200-$textlen;
$('#num').text($stextlen);
$('.btn').removeAttr('disabled');
console.log($textlen)
if($textlen<=0){
$s('.btn').attr('disabled','true');
}
})
})
</script>
</body>
</html>
批改老師：天蓬老師批改時間：2019-05-20 09:31:36
老師總結：jQuery的選擇器的使用很規(guī)范, 代碼也符合要求 , 但就是一行注釋沒有, 這樣的代碼可讀性,可維護性是不好的, 請加上注釋, 你現(xiàn)在能理解, 過上幾個月, 或者同事看, 會遇到麻煩的,是不是?