js实现微博发布小功能

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

1、动态添加节点标签。

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

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

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

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

<!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">
 // 方法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.innerHTML=boys[1].value+"<a href='javascript:;'>删除</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);
 }
 }
 }
 }
 // 方法2 引用jQuery
 // $(function(){
 // $("<ul></ul>").appendTo("#box");
 // var $text = $("#box").find("textarea");
 // var $btn = $("#box").find("button");
 // $btn.on("click",function(){
 // if($text.val() ==""){
 // alert("请输入内容");
 // return;
 // }
 // $("ul").prepend("<li>"+$text.val()+"<a href='javascript:;'>删除</a></li>");
 // $text.val("");
 // $("a").on("click",function(){
 // $(this).parent("li").remove();
 // })
 // })
 // })
 </script>
</head>
<body>
 <div class="box" id="box">
 微博发布：</br><textarea cols="30" rows="10"></textarea>
 <button>发布</button>
 </div>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • JavaScript仿微博发布信息案例

    JavaScript仿微博发布信息案例

    现在很多类似以微博发布动态的效果,下面为一个用 JavaScript写的小小的类似微博发布信息的案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布</title> <style type="text/css"> *{ padding: 0; margin: 0;

  • JS实现仿新浪微博发布内容为空时提示功能代码

    JS实现仿新浪微博发布内容为空时提示功能代码

    本文实例讲述了JS实现仿新浪微博发布内容为空时提示功能.分享给大家供大家参考.具体如下: 这里使用JavaScript模拟新浪微博的一个功能,在发布微博的内容为空时,文本框提醒用户这里没有输入内容,本功能让人感觉网页很智能,在和你对话一样,很人性化.本特效引用了一个外部了JS封装类,你可下载到本地使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fsina-info-submit-empty-style-codes/ 具体代码如下:

  • JS实现模仿微博发布效果实例代码

    JS实现模仿微博发布效果实例代码

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        *        {            margin: 0;

  • 基于javascript制作微博发布栏效果

    本文为大家分享了做微博发布栏效果的过程,涉及到的知识点包括以下: 1.判断IE的方法:直接用  var ie=!-[1,];即可 2.连续发生事件的用法:  IE下:触发对象.onpropertychange  标准下:触发对象.oninput 3.焦点聚集和移开事件.onfocus和onblur 4.判断单字节(0-255之间)与双子节:正则表达式:/[^\x00-\xff]/g 代码如上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

  • 原生JavaScript制作微博发布面板效果

    原生JavaScript制作微博发布面板效果

    javaScript实现微博发布面板效果.采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninput.onpropertychange等事件 动态添加元素,获取设置动态属性 基本思路: 当内容为空时,发布按钮为灰色,点击时候文本框会闪动,输入文字会提示还可以输入多少文字,超出会提示,且不能发布,要注意的是,判断文本框内容的长度,不能直接来,因为英文属于一个字节,中文占两个,要用正则处理一下! 获取到所有头像的s

  • js控住DOM实现发布微博效果

    这段代码的效果具体是输入标题和内容,点击发布把消息发布出去,并使最新的消息始终在内容的最上面,代码为: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博消息效果</title> <style> *{margin:0;padding: 0;} .warp{ width: 600px; mar

  • js实现微博发布小功能

    微博发布功能,可发布可删除.样式没设置忽略,主要知识点及注意点: 1.动态添加节点标签. 2.内容为空时不能发布. 3.新发布的内容要在上面. 4.内容删除要同时删除掉节点. 5.为保持样式输入框要设置为不可拖拽. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <

  • js实现简单抽奖小功能

    js实现简单抽奖小功能

    本文实例为大家分享了js实现简单抽奖小功能的具体代码,供大家参考,具体内容如下 1.场景: 点击按钮开始随机抽取奖品,当停止那刻停留在大屏幕的是抽中的奖品("谢谢"即为没奖). 2.思路: 众所周知,抽奖主要讲究的就是随机性,并且是在一堆奖项中抽取.那么可以锁定方向:用数组放奖项名,用Math.random()来返回介于 0(包含) ~ 1(不包含) 之间的一个随机数.只要能随机选中数组的下标,便能随机选中奖项. 话不多说,附上代码: <!DOCTYPE html> <

  • JS实现随机抽奖小功能

    JS实现随机抽奖小功能

    本文实例为大家分享了JS实现随机抽奖小功能的具体代码,供大家参考,具体内容如下 点击开始按钮开始抽奖,div依次变红!下面是js代码,需要的自取 <script>         var but1 = document.getElementById("btn1")         var but2 = document.getElementById("btn2")         var alldiv = document.querySelectorAl

  • js仿微博动态栏功能

    js仿微博动态栏功能

    知识有限,目前只写了发布动态的功能,没有写兼容,后面再慢慢完善.嘿嘿 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博</title> <style> body, p, img, ul, li { margin: 0; padding: 0; } body { bac

  • js实现随机点名小功能

    本文实例为大家分享了js实现随机点名功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="name1"></div> <button id="btn"

  • js实现简易计算器小功能

    本文实例为大家分享了js实现简易计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>

  • 原生JS实现的简单小钟表功能示例

    原生JS实现的简单小钟表功能示例

    本文实例讲述了原生JS实现的简单小钟表功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net 钟表</title> <style type="text/css"> body { background-color:#00A2D

  • Node.js 实现抢票小工具 & 短信通知提醒功能

    要知道在深圳上班是非常痛苦的事情,特别是我上班的科兴科技园这一块,去的人非常多,每天上班跟春运一样,如果我能换到以前的大冲上班那就幸福了,可惜,换不得. 尤其是我这个站等车的多的一笔,上班公交挤的不行,车满的时候只有少部分人能硬挤上去.通常我只会用两个字来形容这种人:"公交怪" 想当年我朋友瘦的像只猴还能上去,老子身高182体重72kg挤个公交,不成问题,反手一个阻挡,闷声发大财,前面的阿姨你快点阿姨,别磨磨唧唧的,快上去啊阿姨,嗯?你还想挤掉我?你能挤掉我?你能挤掉我!我当场!把车吃

  • JS实现canvas简单小画板功能

    本文实例为大家分享了JS实现canvas简单小画板的具体代码,供大家参考,具体内容如下 Html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • AngularJs页面筛选标签小功能

    AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:

随机推荐