Get the App
SLTechnology News&Howtos  ›  Development  › 

How to realize the small function of Weibo release by js

Shulou Source: shulou.com Published: 2022-06-01 11:22:57 10月04日 Update

这篇文章主要为大家展示了"js如何实现微博发布小功能",内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下"js如何实现微博发布小功能"这篇文章吧。

微博发布功能,可发布可删除。样式没设置忽略,主要知识点及注意点:

1、动态添加节点标签。

2、内容为空时不能发布。

3、新发布的内容要在上面。

4、内容删除要同时删除掉节点。

5、为保持样式输入框要设置为不可拖拽。

Document * {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; } // 方法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("输入不能为空"); return; } var newli= document.createElement("li"); newli[xss_clean]=boys[1].value+"删除"; 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

Tags: Content function article input method style knowledge node learning help dynamic at the same time easy to understand more organization label knowledge point editing industry information Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno OPPO Reno Linux Xiaomi Shulou Tech Info Shulou Information