当前位置:网站首页>微博发布案例
微博发布案例
2022-07-07 04:00:00 【九阈】
①点击发布按钮,动态创建一个小li ,放入文本框的内容和删除按钮,并且添加到ul中。
②点击的删除按钮,可以删除当前的微博留言。
<!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">发布</button>
<div>留言区:</div>
<ul></ul>
</div>
<script>
$(function(){
//1.点击发布按钮,动态创建一个小li,放入文本框的内容和删除按钮,并且添加到ul中
$(".btn").on("click",function(){
var li = $("<li></li>");
li.html($(".txt").val()+ "<a href='javascript:;'>删除</a>");
$("ul").prepend(li);
li.slideDown();
$(".txt").val("");
})
//2.点击的删除按钮,可以删除当前的微博留言li
$("ul").on("click","a",function(){
$(this).parent().slideUp(function(){
$(this).remove();
});
})
})
</script>
</body>
</html>
部分代码转载于
https://blog.csdn.net/weixin_58131487/article/details/120946647
边栏推荐
- Robot technology innovation and practice old version outline
- My ideal software tester development status
- 弹性布局(二)
- Leetcode sword finger offer brush questions - day 20
- Jenkins远程构建项目超时的问题
- Lm11 reconstruction of K-line and construction of timing trading strategy
- Talk about seven ways to realize asynchronous programming
- How can a 35 year old programmer build a technological moat?
- L'étape avancée du pointeur de langage C (haut de gamme) pour l'enroulement des cocons
- Invalid table alias or column reference`xxx`
猜你喜欢
Bindingexception exception (error reporting) processing
$parent (get parent component) and $root (get root component)
身边35岁程序员如何建立起技术护城河?
How can a 35 year old programmer build a technological moat?
URP - shaders and materials - light shader lit
Convolutional neural network -- understanding of pooling
L'externalisation a duré trois ans.
Calculus key and difficult points record part integral + trigonometric function integral
弹性布局(二)
MobaXterm
随机推荐
The metauniverse of the platofarm farm continues to expand, with Dao governance as the core
Music | cat and mouse -- classic not only plot
Détailler le bleu dans les tâches de traduction automatique
[2022 CISCN]初赛 web题目复现
gatk4中的interval是什么??
Introduction to abnova's in vitro mRNA transcription workflow and capping method
我理想的软件测试人员发展状态
点亮显示屏的几个重要步骤
机器人技术创新与实践旧版本大纲
Calculus key and difficult points record part integral + trigonometric function integral
My ideal software tester development status
Pass parent component to child component: props
Outsourcing for three years, abandoned
URP - shaders and materials - simple lit
ASEMI整流桥RS210参数,RS210规格,RS210封装
1140_ SiCp learning notes_ Use Newton's method to solve the square root
三、高质量编程与性能调优实战 青训营笔记
PostgreSQL source code (60) transaction system summary
Detailed explanation of neo4j installation process
KBU1510-ASEMI电源专用15A整流桥KBU1510