jQuery实现模拟微博发布框

刚开始界面
1、输入内容，点击发布按钮，添加到下面。
2、输入内容，按下回车键，同样可以添加内容
3、点击删除，删除该条信息。

效果展示

所有代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>模拟微博发布</title><link rel="stylesheet" type="text/css" href="css/public.css"/><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.weibo{display: block;margin: 20px auto;width: 560px;border: 2px solid #ff0000;}.text{margin-top: 20px;}ul{width: 360px;padding-left: 100px;}ul li{line-height: 40px;border-bottom: 1px dashed #b6b6b6;display: none;}ul li a{float: right;width: 50px;height: 30px;background-color: #ff0000;color: #FFFFFF;text-align: center;line-height: 30px;}.btn{width: 50px;height: 25px;font-size: 15px;}</style></head><body><div class="weibo"><span>模拟微博发布</span><textarea rows="10" cols="50" class="text"></textarea><input type="button" class="btn" value="发布" /><ul></ul></div><script type="text/javascript">$(function(){//1. 点击发布按钮，动态创建一个小li，放入文本框的内容和生成删除按钮，一起添加到ul中$(".btn").on("click", function(){var li = $("<li></li>");li.html($(".text").val() + "<a href='javascript:void(0);'>删除</a>");$("ul").prepend(li);//动画下滑显示发布的内容li.slideDown();//内容发布出去之后，文本框中内容清空$(".text").val("");});// 自己添加的，通过按下回车键发布文本框中内容$(window).keydown(function(event){// if(event.keyCode==13){var li = $("<li></li>");li.html($(".text").val() + "<a href='javascript:void(0);'>删除</a>");$("ul").prepend(li);//动画下滑显示发布的内容 没啥用 纯属好看li.slideDown();//内容发布出去之后，文本框中内容清空$(".text").val("");}});//2.点击删除按钮， 可以删除当前发布的内容// $("ul a").click(function(){//此时click不能给动态创建的 a 添加事件//     alert(11);// })// on 可以给动态创建的元素绑定事件$("ul").on("click","a", function(){$(this).parent().slideUp(function(){$(this).remove();});})})</script></body>
</html>

jQuery实现模拟微博发布框相关推荐

用原生js写一个微博发布框，留言框。
本来这篇文章是昨晚发布的,但是昨天网上自己的网站出了一些问题. 百度一下可能是因为配置的问题,但是自己对后端,以及命令行实在不懂.好吧那就把它先放着.等我学了php以及linux在回来解决吧. 今天写 ...
jQuery+css模拟下拉框模糊搜索的实现
html: @*输入框*@ <div><input type="text" style="width: 85%; height: 34px;" ...
原生js--选项卡全选反选，选项卡切换,模拟搜索框，微博发布（带时间）,注册协议倒计时
1.全选反选按钮 <!DOCTYPE html> <html> <head lang="en"><meta charset="U ...
JQuery模拟boostrap模态框效果
JQuery模拟boostrap模态框效果 1.单个模态框代码案例: <!doctype html> <html> <head> <meta charset= ...
jQuery模拟下拉框单选框复选Select，Checkbox，Radio
在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们: 如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&q ...
jQuery实现微博发布
文章目录一.案例演示二.操作步骤 1.html代码 2.js代码一.案例演示在输入框中输入内容,点击发布滑动到输入框下面,输入框内容消失,点击删除可以移除一列. 二.操作步骤 1.html代码 ...
前端常用事件案例——抽名字（抽奖）/搜索下拉菜单/微博文本框
目录抽名字(抽奖) 搜索下拉菜单微博文本框进阶微博案例抽名字(抽奖) 实现效果是:点击开始按钮,则方框不断显示名字,点击停止,抽到的人名就是谁,并且删除,继续直到抽完后禁用按钮 ①点击开始按钮 ...
autojs微博_js实现微博发布小功能
微博发布功能,可发布可删除.样式没设置忽略,主要知识点及注意点: 1.动态添加节点标签. 2.内容为空时不能发布. 3.新发布的内容要在上面. 4.内容删除要同时删除掉节点. 5.为保持样式输入框要设 ...
Cris 小哥哥的大数据项目之 HBase 模拟微博核心功能
Cris 小哥哥的大数据项目之 HBase 模拟微博核心功能 Author:Cris 文章目录 Cris 小哥哥的大数据项目之 HBase 模拟微博核心功能 Author:Cris 0. 序 1. 需 ...

jQuery实现模拟微博发布框

jQuery实现模拟微博发布框

jQuery实现模拟微博发布框相关推荐

最新文章

热门文章