微博输入案例

原创2019-08-26 19:29:239
摘要:<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, in

<!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>微博输入案例</title>

   <style>

       *{

           margin: 0;

           padding: 0;

       }

       .box{

           width: 610px;height: 180px;border:10px solid pink;margin: 0 auto;padding:10px;

       }

       .box1{

           float: right;

           font-size: 14px;

           color: #888888;

           

       }  

       #text{

           width: 606px;

           height: 106px;

           border: 1px solid #ccc;

           margin:5px 0;

         

       }

       input{

           width: 80px;

           height: 30px;

           background: #FFC09F;

           border-radius: 5px;

           color:white;

       }

       .box #sp1,#sp2,#sp3,#sp4,#sp5,#sp6{

           float: left;width: 32px;height: 32px;padding-left: 26px;line-height: 32px;

       }

       #sp1{background: url(images/an5.png) no-repeat left center;}

       #sp2{background: url(images/an4.png) no-repeat left center;}

       #sp3{background: url(images/an3.png) no-repeat left center;}

       #sp4{background: url(images/an2.png) no-repeat left center;}

       #sp5{background: url(images/an1.png) no-repeat left center;width: 40px;}

       #sp6{ margin-left: 128px;margin-right:15px;color: #888;border:none;s }

   </style>

</head>

<body>

   <script type="text/javascript">

       var text,number,m

       window.onload=function (){

           text=document.getElementById('text')

           number=document.getElementById('number')

           bt=document.getElementById('bt')

           text.onkeyup=function aa(){

               m=140-text.value.length

               if(m<0){

                   number.style.color="red"

               }else{

                   number.style.color="#888"

               }

               number.innerHTML=m;

           }


           bt.onclick=function(){

               if (m==140) {

                   alert("你还没有输入")

                   text.focus()

               }else if(m<0){

                   alert("字数太多,不可以发布")

                   text.focus()

               }else{

                   alert("发布成功")

               }

           }

           

       }

   </script>

           

   

   <div class="box">

       <img src="images/12.png" alt="">

       <div class="box1">还可以输入<span id='number'></span>字</div>

       <textarea name="" id="text" cols="30" rows="10" ></textarea>

       <span id="sp1">表情</span>

       <span id="sp2">图片</span>

       <span id="sp3">视频</span>

       <span id="sp4">话题</span>

       <span id="sp5" style="width: 66px;">长微博</span>

       <span id="sp6">公开</span>

       <input type="button" value="发布" id="bt">

   </div>

</body>

</html>


批改老师:Peter-Zhu批改时间:2019-08-27 09:18:12
老师总结:其实,weibo早已取消了字数限制, 但这仍是一个不错的小练习

发布手记

热门词条

第九期线上培训班