js realizes micro blog publishing function

  • 2021-07-10 18:37:14
  • OfStack

Weibo publishing function, which can be published or deleted. Style is not set to ignore, main knowledge points and attention points:

1. Add node labels dynamically.

2. The content cannot be published when it is empty.

3. The newly released content should be on it.

4. Content deletion should also delete nodes.

5. To keep the style input box, set it to non-drag.


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 * {margin: 0;padding: 0;}

 .box{
 border: 1px solid #000;
 width: 600px;
 height: auto;
 margin:100px auto;
 padding:30px 0;
 }
 textarea{
 width: 450px;
 resize:none;
 margin-left: 20px;
 }
 ul li{
 width: 450px;
 list-style: none;
 border-bottom: 1px dotted #ccc;
 margin-left:20px;
 line-height: 30px;
 color: #333;
 }
 ul li a{
 float: right;
 font-size: 12px;
 }
 </style>
 <script src="../jquery-1.11.1.min.js"></script>
 <script type="text/javascript">
 //  Method 1
 window.onload = function () {
 var box = document.getElementById("box");
 var boys=box.children;
 var ul = document.createElement("ul");
 box.appendChild(ul);
 boys[2].onclick = function (){
 if(boys[1].value==""){
 alert(" Input cannot be blank ");
 return;
 }
 var newli= document.createElement("li");
 newli.innerHTML=boys[1].value+"<a href='javascript:;'> Delete </a>";
 boys[1].value ="";
 var lis=ul.children;
 if(lis.length==0){ul.appendChild(newli);}else{
 ul.insertBefore(newli, lis[0]);
 }
 var as=document.getElementsByTagName("a");
 for (var i=0;i<as.length;i++){
 as[i].onclick=function(){
 ul.removeChild(this.parentNode);
 }
 }
 }
 }
 //  Method 2  Quote jQuery
 // $(function(){
 // $("<ul></ul>").appendTo("#box");
 // var $text = $("#box").find("textarea");
 // var $btn = $("#box").find("button");
 // $btn.on("click",function(){
 // if($text.val() ==""){
 // alert(" Please enter content ");
 // return;
 // }
 // $("ul").prepend("<li>"+$text.val()+"<a href='javascript:;'> Delete </a></li>");
 // $text.val("");
 // $("a").on("click",function(){
 // $(this).parent("li").remove();
 // })
 // })
 // })
 </script>
</head>
<body>
 <div class="box" id="box">
  Weibo released: </br><textarea cols="30" rows="10"></textarea>
 <button> Publish </button>
 </div>
</body>
</html>

Related articles: