博客列表 >微博输入字数案例

微博输入字数案例

刘静的博客
刘静的博客原创
2020年08月18日 13:06:28690浏览

微博输入字数代码如下:

  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>
  68. </body>
  69. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议