js实现微博发布小功能


Posted in Javascript onJanuary 12, 2017

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

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 #Javascript
canvas实现绘制吃豆鱼效果
Jan 12 #Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 #Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 #Javascript
JS实现仿百度文库评分功能
Jan 12 #Javascript
移动端基础事件总结与应用
Jan 12 #Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 #Javascript
You might like
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
php类的定义与继承用法实例
2015/07/07 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
PHP微信API接口类
2016/08/22 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
Python3内置模块random随机方法小结
2019/07/13 Python
python3下pygame如何实现显示中文
2020/01/11 Python
Tensorflow累加的实现案例
2020/02/05 Python
Python多分支if语句的使用
2020/09/03 Python
Django自带的用户验证系统实现
2020/12/18 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
仲裁协议书
2014/09/26 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
python文件目录操作之os模块
2021/05/08 Python