Chinaunix首页 | 论坛 | 博客

拾忆1765207585的ChinaUnix博客

首页　| 　博文目录　| 　关于我

拾忆1765207585

  • 博客访问： 957365
  • 博文数量： 210
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2070
  • 用 户 组： 普通用户
  • 注册时间： 2014-11-19 21:54
文章分类

全部博文（210）

文章存档

2020年（2）

2019年（18）

2018年（27）

2017年（5）

2016年（53）

2015年（88）

2014年（17）

我的朋友
最近访客
推荐博文
jQ 微博发布效果

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

  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. }


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

上一篇：jQ 蒙版的效果

下一篇：jQ tab选项卡效果

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6