Chinaunix首页 | 论坛 | 博客

拾忆1765207585的ChinaUnix博客

首页　| 　博文目录　| 　关于我

拾忆1765207585

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

全部博文（210）

文章存档

2020年（2）

2019年（18）

2018年（27）

2017年（5）

2016年（53）

2015年（88）

2014年（17）

我的朋友
最近访客
推荐博文
微博 发布 及 回复框

分类： JavaScript

2016-08-22 10:37:35


点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 margin:0;
  9.                 padding: 0;
  10.             }
  11.             #enterbox{
  12.                 width: 1000px;
  13.                 height: 400px;
  14.                 margin: 0 auto;
  15.                 padding:50px;
  16.                 border: 1px solid gainsboro;
  17.                 margin-top: 40px;
  18.             }
  19.             #enterbox textarea{
  20.                 resize: none;
  21.                 width: 1020px;
  22.                 height: 300px;
  23.                 margin-top: 50px;
  24.                 border: 1px solid gainsboro;
  25.                 font-size: 16px;
  26.                 color: grey;
  27.             }
  28.             #enterbox p{
  29.                 margin-bottom: -20px;
  30.                 float: right;
  31.                 color:red;
  32.             }
  33.             h2{
  34.                 margin-bottom: -20px;
  35.                 color:gray;
  36.             }
  37.             #enterbox button{
  38.                 float:right;
  39.                 width: 100px;
  40.                 height: 40px;
  41.                 margin-top: 20px;
  42.                 font-size: 25px;
  43.                 color:gray;
  44.             }
  45.             #replaybox{
  46.                 width: 1070px;
  47.                 height: 200px;
  48.                 margin:0 auto;
  49.                 padding: 20px;
  50.                 margin-top: 40px;
  51.                 border:1px solid gainsboro;
  52.                 background-repeat: no-repeat;
  53.                 
  54.             }
  55.             #replaybox p{
  56.                 float: left;
  57.                 margin-left: 50px;
  58.                 
  59.             }
  60.             #picture{
  61.                 width: 200px;
  62.                 height: 200px;
  63.                 
  64.                 background: url(img/1.jpg);
  65.                 float: left;
  66.             }
  67.             #word{
  68.                 width: 815px;
  69.                 height: 200px;
  70.                 float: left;
  71.                 margin-left: 40px;
  72.                 border: 0px solid gainsboro;
  73.             }
  74.             #delbutton{
  75.                 float:right;
  76.                 width: 100px;
  77.                 height: 40px;
  78.                 margin-top: 20px;
  79.                 font-size: 10px;
  80.                 color:gray;
  81.                 margin-right: 20px;
  82.                 margin-top:150px;
  83.             }
  84.             #word textarea{
  85.                 resize: none;
  86.                 width: 650px;
  87.                 height: 130px;
  88.                 margin: 20px 0 0 20px;
  89.                 font-size: 16px;
  90.                 border:1px solid gainsboro;
  91.                 
  92.             }
  93.             span{
  94.                 font-size: 20px;
  95.                 color:gray;
  96.                 
  97.             }
  98.         </style>
  99.         <script type="text/javascript">
  100.             //js文件在整个html文件加载完成之后，才进行读取
  101.             window.onload= function (){
  102.                 //获取Idbutton
  103.                 var button = document.getElementById("button");
  104.                 //按钮的点击事件
  105.                 button.onclick =function(){
  106.                 //判断textarea的value是否为空，选择读取那一段代码
  107.                 var wenben = document.getElementById("userinput").value;
  108.                 //正则表达式
  109.                 wenben = wenben.replace(/(\s*)|(\s*$)/g,"");
  110.                 if(wenben ==""){
  111.                     alert("内容不能为空");
  112.                     window.location.reload();
  113.                 }else{
  114.                 //在js添加html注释掉的代码框架如下：
  115.                 var div2=document.createElement("div2");
  116.                 var div1=document.createElement("div");
  117.                 var div3=document.createElement("div3");
  118.                 var div4=document.createElement("div4");
  119.                 var textarea11 = document.createElement("textarea");
  120.                 var button = document.createElement("button");
  121.                 var span = document.createElement("span");
  122.                 var zi = document.createTextNode("删除");
  123.                 //首先在根节点创建一个空的（第一个子节点）节点，作为占位作用
  124.                 var first = downbox.firstChild;
  125.                 downbox.insertBefore(div1,first);
  126.                 div1.appendChild(div2);
  127.                 div1.appendChild(div3);
  128.                 div3.appendChild(div4);
  129.                 div4.appendChild(textarea11);
  130.                 div3.appendChild(button);
  131.                 button.appendChild(span);
  132.                 span.appendChild(zi);
  133.                 
  134.                 
  135.                 //分别给已经创建的div块添加id名，css样式（预先在css中定义好的）
  136.                 div1.setAttribute("id","replaybox");
  137.                 div2.setAttribute("id","picture");
  138.                 div3.setAttribute("id","word");
  139.                 div4.setAttribute("id","del")
  140.                 textarea11.setAttribute("id","useraccpet"); //接收的是enterbox的textarea的内容
  141.                 button.setAttribute("id","delbutton");
  142.                 //texteare的value值赋给创建的创建的textarea，
  143.                 textarea11.value = wenben;
  144.                 document.getElementById("userinput").value=null;
  145.                 
  146.                 var btn = document.getElementById("delbutton")
  147. //                console.log(btn);
  148.                 //删除按键的点击事件
  149.                 btn.onclick=function(){
  150.                 //父节点（根节点）删除子节点
  151.                     downbox.removeChild(div1);
  152.                 }
  153.                 
  154.             }    
  155.         }
  156.                
  157. }
  158.         </script>
  159.     </head>
  160.     <body>
  161.         <div id="bigbox">
  162.             <div id="enterbox">
  163.                 <h2>有什么想对博主说的</h2>
  164.                 <p>最多不能超过2000字</p>
  165.                 <textarea name="" id="userinput" cols="30" rows="10" value=""></textarea>
  166.                 <button id="button">提交</button>
  167.             </div>
  168.             <div id="downbox">
  169.                 <!--在js里面创建的思路如下代码-->
  170.                 <!--<div id="replaybox">
  171.                     <div id="picture"></div>
  172.                     <div id="word">
  173.                         <div id="del">
  174.                             <textarea name="" id="useraccpet" cols="30" rows="10" value="">adfadfad</textarea>
  175.                             <button id="delbutton" value="删除">删除</button>
  176.                         </div>
  177.                     </div>
  178.                 </div>-->
  179.             </div>
  180.             
  181.         </div>
  182.     </body>
  183. </html>

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

上一篇：JavaScript简单学习----函数

下一篇：JavaScript 阻止浏览器默认事件

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

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

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

16024965号-6