当前位置:网站首页>Weibo publishing cases
Weibo publishing cases
2022-07-07 07:38:00 【Nine thresholds】
① Click the Publish button , Dynamically create a small li , Put the contents of the text box and delete button , And add to ul in .
② Click the delete button , You can delete the current microblog message .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.box {
position: relative;
width: 450px;
height: 450px;
margin: 20px auto;
background-color: skyblue;
}
button {
position: absolute;
right: 10px;
top: 50px;
width: 80px;
height: 80px;
border: 0;
font-size: 20px;
}
textarea {
outline: none;
}
li {
padding: 5px 0;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="box" id="weibo">
<textarea name="" class="txt" id="" cols="40" rows="10"></textarea>
<button class="btn"> Release </button>
<div> Message area :</div>
<ul></ul>
</div>
<script>
$(function(){
//1. Click the Publish button , Dynamically create a small li, Put the contents of the text box and delete button , And add to ul in
$(".btn").on("click",function(){
var li = $("<li></li>");
li.html($(".txt").val()+ "<a href='javascript:;'> Delete </a>");
$("ul").prepend(li);
li.slideDown();
$(".txt").val("");
})
//2. Click the delete button , You can delete the current microblog message li
$("ul").on("click","a",function(){
$(this).parent().slideUp(function(){
$(this).remove();
});
})
})
</script>
</body>
</html>
Some codes are reproduced in
https://blog.csdn.net/weixin_58131487/article/details/120946647
边栏推荐
- Example of Pushlet using handle of Pushlet
- L'étape avancée du pointeur de langage C (haut de gamme) pour l'enroulement des cocons
- 我理想的软件测试人员发展状态
- Procedure in PostgreSQL supports transaction syntax (instance & Analysis)
- 为什么要了解现货黄金走势?
- 07_ Handout on the essence and practical skills of text measurement and geometric transformation
- 解决:Could NOT find KF5 (missing: CoreAddons DBusAddons DocTools XmlGui)
- @component(““)
- JS plot flot application - simple curve
- 外包干了三年,废了...
猜你喜欢
【Liunx】进程控制和父子进程
I failed in the postgraduate entrance examination and couldn't get into the big factory. I feel like it's over
Bindingexception exception (error reporting) processing
科技云报道:从Robot到Cobot,人机共融正在开创一个时代
Make a bat file for cleaning system garbage
MobaXterm
Fast quantitative, abbkine protein quantitative kit BCA method is coming!
二、并发、测试笔记 青训营笔记
面试结束后,被面试官在朋友圈吐槽了......
2022-07-06:以下go语言代码是否会panic?A:会;B:不会。 package main import “C“ func main() { var ch chan struct
随机推荐
考研失败,卷不进大厂,感觉没戏了
"Xiaodeng in operation and maintenance" meets the compliance requirements of gdpr
1141_ SiCp learning notes_ Functions abstracted as black boxes
4、 High performance go language release optimization and landing practice youth training camp notes
电商常规问题part1
【云原生】内存数据库如何发挥内存优势
Build personal website based on flask
四、高性能 Go 语言发行版优化与落地实践 青训营笔记
抽丝剥茧C语言(高阶)数据的储存+练习
BGP experiment (1)
1089: highest order of factorial
L'externalisation a duré trois ans.
基于Flask搭建个人网站
Write CPU yourself -- Chapter 9 -- learning notes
Software acceptance test
[cloud native] how to give full play to memory advantage of memory database
[2022 ACTF]web题目复现
3、 High quality programming and performance tuning practical youth training camp notes
[ANSYS] learning experience of APDL finite element analysis
面试官:你都了解哪些开发模型?