JavaScript仿微博发布信息案例

最新推荐文章于 2024-04-17 20:36:12 发布

周杰伦演唱会

最新推荐文章于 2024-04-17 20:36:12 发布

阅读量683

点赞数 1

分类专栏：微博发布系统

微博发布系统专栏收录该内容

11 篇文章 0 订阅

订阅专栏

 
  <!DOCTYPE html> 
 
  < 
  html 
  lang 
  = 
  "en" 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
  charset 
  = 
  "UTF-8" 
  > 
 
  < 
  title 
  >微博发布</ 
  title 
  > 
 
  < 
  style 
  type 
  = 
  "text/css" 
  > 
 
  *{ 
 
  padding: 0; 
 
  margin: 0; 
 
  } 
 
  ul { 
 
  list-style: none; 
 
  } 
 
  .box { 
 
  width: 600px; 
 
  height: auto; 
 
  border: 1px solid #ccc; 
 
  margin: 100px auto; 
 
  text-align: center; 
 
  padding: 30px 0; 
 
  background-color: rosybrown; 
 
  } 
 
  .box textarea { 
 
  width: 450px; 
 
  resize: none; /*设置文本不能过拖动*/ 
 
  } 
 
  .box li { 
 
  width: 450px; 
 
  line-height: 30px; 
 
  border-bottom: 1px dashed #ccc; 
 
  margin-left: 80px; 
 
  text-align: left; 
 
  } 
 
  .box li a { 
 
  float: right; 
 
  } 
 
  </ 
  style 
  > 
 
  < 
  script 
  type 
  = 
  "text/javascript" 
  > 
 
  window.onload = function (){ 
 
  //获取数组的第一个 
 
  var btn = document.getElementsByTagName("button")[0]; 
 
  var txt = document.getElementsByTagName("textarea")[0]; 
 
  var ul = document.createElement("ul");  
 
  btn.parentNode.appendChild(ul); //添加子节点 
 
  btn.onclick = function (){ 
 
  //1.需要判断文本中是否有内容 
 
  if(txt.value == ""){ 
 
  alert("亲!内容不能为空哦!!"); 
 
  return false; //让操作就在这个地方终止 
 
  } 
 
  var newli = document.createElement("li"); //创建一个新的li标签 
 
  newli.innerHTML = txt.value +"< 
  a 
  href 
  = 
  'javascript:;' 
  >删除</ 
  a 
  >"; //给新的标签添加内容，并拼接删除已连接 
 
  ul.appendChild(newli); 
 
  //清空输入框 
 
  txt.value = ""; 
 
  var aa = document.getElementsByTagName("a");//获取所有的a标签 
 
  for(var i = 0;i< 
  aa.length 
  ;i++){ // 遍历点击删除 
 
  aa[i] 
  .onclick 
  =  
  function 
   () { 
 
  this.parentNode.remove(); 
 
  } 
 
  } 
 
  } 
 
  } 
 
  </script> 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  < 
  div 
  class 
  = 
  "box" 
  > 
 
  微博发布:< 
  textarea 
  name 
  = 
  "" 
  id 
  = 
  "" 
  cols 
  = 
  "30" 
  rows 
  = 
  "10" 
  ></ 
  textarea 
  > 
 
  < 
  button 
  >发布</ 
  button 
  > 
 
  </ 
  div 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >

布局出来的样式，点击蓝色的删除链接，会删除对应的那一行内容。

陌陌说：重要知识点：获取输入框的数值，创建子节点和给子节点添加内容，删除对应的节点。

周杰伦演唱会

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript仿微博发布信息案例

htmllang="en">head> metacharset="UTF-8"> title>微博发布title> styletype="text/css"> *{ padding: 0; margin: 0; } ul { list-style: none; }
复制链接

扫一扫