拾忆1765207585

拾忆1765207585

关注
发信
关注(28)粉丝(399)

jQ 微博发布效果

jQ 微博发布效果-LMLPHP
代码：

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>jQ的微博发布</title>
  6.         <link rel="stylesheet" href="css/1.css" />
  7.         <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
  8.         <script type="text/javascript" src="js/1.js"></script>
  9.     </head>
  10.     <body>
  11.         
  12.         <div id="bigbox">
  13.             <div id="enterbox">
  14.                 <h2>有什么想对博主说的</h2>
  15.                 <p>最多不能超过2000字</p>
  16.                 <textarea name="" id="userinput" cols="30" rows="10" value=""></textarea>
  17.                 <button id="button">提交</button>
  18.             </div>
  19.             <div id="downbox">
  20.                 <!--在js里面创建的思路如下代码-->
  21.                 <!--<div id="replaybox">
  22.                     <div id="picture"></div>
  23.                     <div id="word">
  24.                         <div id="del">
  25.                             <textarea name="" id="useraccpet" cols="30" rows="10" value="">adfadfad</textarea>
  26.                             <button id="delbutton" value="删除">删除</button>
  27.                         </div>
  28.                     </div>
  29.                 </div>-->
  30.             </div>
  31.             
  32.         </div>
  33.     </body>
  34. </html>


点击(此处)折叠或打开

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. #enterbox{
  6.     width: 1000px;
  7.     height: 400px;
  8.     margin: 0 auto;
  9.     padding:50px;
  10.     border: 1px solid gainsboro;
  11.     margin-top: 40px;
  12. }
  13. #enterbox textarea{
  14.     resize: none;
  15.     width: 1020px;
  16.     height: 300px;
  17.     margin-top: 50px;
  18.     border: 1px solid gainsboro;
  19.     font-size: 16px;
  20.     color: grey;
  21. }
  22. #enterbox p{
  23.     margin-bottom: -20px;
  24.     float: right;
  25.     color:red;
  26. }
  27. h2{
  28.     margin-bottom: -20px;
  29.     color:gray;
  30. }
  31. #enterbox button{
  32.     float:right;
  33.     width: 100px;
  34.     height: 40px;
  35.     margin-top: 20px;
  36.     font-size: 25px;
  37.     color:gray;
  38. }
  39. #replaybox{
  40.     width: 1070px;
  41.     height: 200px;
  42.     margin:0 auto;
  43.     padding: 20px;
  44.     margin-top: 40px;
  45.     border:1px solid gainsboro;
  46.     background-repeat: no-repeat;
  47.     
  48. }
  49. #replaybox p{
  50.     float: left;
  51.     margin-left: 50px;
  52.     
  53. }
  54. #picture{
  55.     width: 200px;
  56.     height: 200px;
  57.     
  58.     background: url(img/1.jpg);
  59.     float: left;
  60. }
  61. #word{
  62.     width: 815px;
  63.     height: 200px;
  64.     float: left;
  65.     margin-left: 40px;
  66.     border: 0px solid gainsboro;
  67. }
  68. #delbutton{
  69.     float:right;
  70.     width: 100px;
  71.     height: 40px;
  72.     margin-top: 20px;
  73.     font-size: 10px;
  74.     color:gray;
  75.     margin-right: 20px;
  76.     margin-top:150px;
  77. }
  78. #word textarea{
  79.     resize: none;
  80.     width: 640px;
  81.     height: 120px;
  82.     padding: 5px;
  83.     margin: 20px 0 0 20px;
  84.     font-size: 16px;
  85.     border:1px solid gainsboro;
  86.     background: white;
  87.     
  88. }
  89. span{
  90.     font-size: 20px;
  91.     color:gray;
  92.     
  93. }


点击(此处)折叠或打开

  1. window.onload = function(){
  2.     
  3.     $(function(){
  4.         
  5.         $("button").click(function(){
  6.             
  7.          var b = $("#userinput").val();
  8.         
  9.          b = b.replace(/(\s*)|(\s*$)/g,"");
  10.          console.log(b);
  11.          if( b == ""){
  12.              alert("内容不能为空");
  13. //             window.location.reload();
  14.          }else{
  15.              $("#downbox").prepend(("
    ////
    //// ////
    "    ) );

  17.              $("#useraccpet").val(b);
  18.             $("#userinput").val(null);
  19.             
  20.             
  21.             
  22.             
  23.                 $("#delbutton").click(function(){
  24.                     
  25.                     $(this).parents("#replaybox").slideUp(1000);
  26.                 })
  27.                 
  28.         
  29.          }
  30.         })
  31.     })
  32.   
  33.     
  34. }


11-10 20:25
Powered by LMLPHP ©2024 拾忆1765207585 0.067336