微博输入字数

Original 2019-05-19 22:53:56 175
abstract:<!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>微博输入字数</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">发布</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>


Correcting teacher:天蓬老师Correction time:2019-05-20 09:31:36
Teacher's summary:jQuery的选择器的使用很规范, 代码也符合要求 , 但就是一行注释没有, 这样的代码可读性,可维护性是不好的, 请加上注释, 你现在能理解, 过上几个月, 或者同事看, 会遇到麻烦的,是不是?

Release Notes

Popular Entries