Chinaunix首页 | 论坛 | 博客
  • 博客访问: 569417
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2052
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: jQuery

2016-09-09 21:30:04


代码:

点击(此处)折叠或打开

  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(("
    ////
    //// ////
    "
    ) );

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


阅读(520) | 评论(0) | 转发(0) |
0

上一篇:jQ 蒙版的效果

下一篇:jQ tab选项卡效果

给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册