用原生js写一个微博发布框,留言框。
本来这篇文章是昨晚发布的,但是昨天网上自己的网站出了一些问题。
百度一下可能是因为配置的问题,但是自己对后端,以及命令行实在不懂。好吧那就把它先放着。等我学了php以及linux在回来解决吧。
今天写一个类似微博发布框,或者留言框的东西。
类似下边这样,在文本域里边输入文字,然后发布下边会显示。点击删除会删掉文字,当然这些都没有连接数据库。只是简单的实现这个功能罢了。
思路:
整体的思路
外边一个大盒子,里边嵌套一个文本域,一个按钮。下边的文字可以用无序列表进行添加。
建一个demo如下:
附上css:
重点是怎么用js实现这样点击发布以及删除的功能?
思路:
将按钮与文本域输入的内容产生联系。给按钮加上点击事件,在点击之前,先在下边产生一个ul。点击之后先进行一个判断,如果用户未输入,则报错。程序不执行下边的。用户输入了后,创建Li。并且将文本域的内容给li(并且在li后边加上一个a,里边放删除)。难点是每一个产生的li会放在ul的最后边,也就是新发布的在下边,后边发布的在上边。接下来就需要将后边发布的放在最上边。怎么做呢?可以进行一个判断,如果这个ul的长度是 ==0 那么就给它添加li。当它有li时,使用插入方法给ul ul.insertBefore(newli,lis[0]) 获得第一个li 然后将新的li插在第一个li的上边.接下来便用a实现删除功能。先获得所有的a,然后给a加上点击事件,当点击a的时候,删除a的父亲。也就是包含它的那个li.最终达到我们所需要的效果。
用原生js写一个微博发布框,留言框。相关推荐
- HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌)
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
- js 取得input绑定的datalist中的值_原生JS写一个ToDo Demo
周六加班没什么事,于是乎...上班摸鱼,用原生JS写了一个ToDo Demo,废话少叙,直接看效果: 如图,实现了以下需求(以下的具体实现我会一一道来): 0.页面的基本布局: 1.rem布局.在不同 ...
- vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- 用原生JS写一个网页版的2048小游戏(兼容移动端)
这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...
- html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- js 写html代码编辑器,原生JS写一个功能强大的编辑器
因为一个同学,要做一个能加入图片的留言板功能,类型与QQ空间留言板和百度贴吧发帖的那种形式,同时在网上找了找发生网上对这方面的交流很少,所以发表这篇文章抛砖引玉,希望能帮助广大的学习者,也同时希望大佬 ...
- 原生js写一个简单的编辑器
js原生写的编辑器,主要是使用document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)来实现的 如果该指令不被支持或停用将会 ...
- 使用原生js写一个简单的注册登录页面
目录 1.注册页面 2.登录页面 1.首先是我们的注册页面 这是我们的html骨架 <!DOCTYPE html> <html lang="en">< ...
- 原生js完成一个简单的抽奖功能
文章目录 前言 实现过程 1.前期准备 2.CSS美化 3.使用 js 完成抽奖功能 3.1 随机数模块 3.2 随机奖品 3.3 开始抽奖 3.4 点击开始抽奖 完整代码 HTML部分 CSS部分 ...
最新文章
- C++动态二维数组演示的代码
- unity 角色 动画脚本_Unity Animation --动画剪辑(外部来源的动画)
- git stage 暂存_什么是Git?下载和安装Git
- python列表每行查找字符串,python - 用python查找子字符串列表成字符串列表 - SO中文参考 - www.soinside.com...
- Java互联网架构-京东国美高并发核心技术“秒杀”
- 获取族_批量添加族参数(上)
- python前端接口_Python接口自动化——Web接口
- python新建文件夹口令_python编程快速上手—口令保管箱
- 2022年文化潮流趋势报告
- 保护公民信息安全 中国在行动
- 阶梯博弈(尼姆博奕进阶)
- Python可视化编辑,让Python 不再难懂
- 使你的程序支持多GPU渲染
- 医院设备管理系统方案/案列/软件/APP/小程序/网站
- 《硅谷钢铁侠》与埃隆.马斯克
- 看_那人好像一个产品狗_对_这就是产品狗
- ipv4和计算机地址是什么意思,ipv6是什么意思?我们怎么查看电脑iPv6地址
- Java for循环和foreach循环区别
- 共享店铺模式是怎么样的一个模式? 共享店铺系统多少钱一套?
- 空格的两个ascii值
热门文章
- python小结价格_Python-S
- 第一次认真入门一场ctf比赛
- linux下 文件排序,如何在Linux中对文件进行排序 (GUI和Shell)
- Ubuntu引导修复/Ubuntu的暴力安装方法
- HOT 100(61~80)【LeetCode】
- 已知银行整存整取不同期限存款的年利率分别为:限期1年:2.25%;限期2年:2.43%;限期3年:2.70%;限期5年:2.88%;...
- 【室友用一局王者荣耀的时间学会了用python写春联】
- 电流,电压与温升之间的关系(多元回归笔记,持续更新)
- Java开发环境搭建与HelloWorld
- 同样是产品经理,凭什么别人能拿到15k+的月薪?