简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 微博输入字数案例
Blogger Information
Blog 22
fans 0
comment 1
visits 17616
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
微博输入字数案例
刘静的博客
Original
693 people have browsed it

微博输入字数代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>03.微博输入字数</title>
  6.     <style type="text/css" media="screen">
  7.         body{font-size:12px;}
  8.         .box{width:600px;height:160px;border:10px solid pink;margin:10px auto;padding:10px;}
  9.         img{float:left;width:190px;height:24px;}
  10.         .box1{float:left;margin-left:255px;width:150px;height:24px;text-align:right;font-size:14px;color:#888;}
  11.         .box1 span{font-size:16px;font-weight:bold;}
  12.         #text{width:600px;height:100px;border:1px solid #888;margin-top:5px;}
  13.         .box #sp1,#sp2,#sp3,#sp4,#sp5,#sp6{float:left;width:30px;height:32px;line-height:32px;padding-left:26px;}
  14.         #sp1{background:url(../static/weibo/an5.png) no-repeat left center;}
  15.         #sp2{background:url(../static/weibo/an4.png) no-repeat left center;}
  16.         #sp3{background:url(../static/weibo/an3.png) no-repeat left center;}
  17.         #sp4{background:url(../static/weibo/an2.png) no-repeat left center;}
  18.         #sp5{background:url(../static/weibo/an1.png) no-repeat left center;width:40px;}
  19.         #sp6{margin-left:150px;margin-right:15px;color:#888;}
  20.         #bt{float:left;width:80px;height:30px;border:none;background:#ffc09f;color:#fff;border-radius:5px;}
  21.     </style>
  22.     <script type="text/javascript">
  23.         var text,number,bt,m;
  24.         window.onload=function(){
  25.             text=document.getElementById('text');
  26.             number=document.getElementById('number');
  27.             bt=document.getElementById('bt');
  28.             text.onkeyup=function aa(){
  29.                 m=140-text.value.length;
  30.                 if(m<0){
  31.                     number.style.color="red";
  32.                 }else{
  33.                     number.style.color="#888";
  34.                 }
  35.                 number.innerHTML=m;
  36.             }
  37.             bt.onclick=function(){
  38.                 if(m>0&&m<140){
  39.                     // alert("您还没输入！！！");
  40.                     // text.focus();
  41.                     alert("发布成功！");
  42.                 }else if(m<0){
  43.                     alert("您输入的字数过多！！");
  44.                     text.focus();
  45.                 }else{
  46.                     alert("您还没输入！！！");
  47.                     text.focus();
  48.                     // alert("发布成功！");
  49.                 }
  50.             }
  51.             // aa();
  52.         }
  53.     </script>
  54. </head>
  55. <body>
  56.     <div class="box">
  57.         <img src="../static/weibo/12.png">
  58.         <div class="box1">还可以输入<span id="number"></span>字</div>
  59.         <textarea id="text"></textarea>
  60.         <span id="sp1">表情</span>
  61.         <span id="sp2">图片</span>
  62.         <span id="sp3">视频</span>
  63.         <span id="sp4">话题</span>
  64.         <span id="sp5">长微博</span>
  65.         <span id="sp6">公开</span>
  66.         <input type="button" value="发布" id="bt">
  67.     </div>
  73. </body>
  74. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！