<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none;
margin-top: 30px;
}
.box {
width: 600px;
margin: 100px auto;
border: 1px solid #ccc;
border-radius: 3px;
padding: 20px;
}
textarea {
width: 100%;
height: 68px;
outline: none;
resize: none;
}
ul {
width: 450px;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #ccc;
}
.title {
float: left;
}
.num {
float: right;
}
.input {
margin-top: 4px;
padding: 5px;
}
.func {
float: right;
}
#btn {
display: inline-block;
height: 28px;
line-height: 29px;
width: 60px;
min-width: 40px;
font-size: 14px;
background-color: #ff8140;
color: #fff;
box-shadow: none;
cursor: default;
border: 1px solid #f77c3d;
outline: none;
padding: 0 10px;
border-radius: 2px;
text-align: center;
}
input {
float: right;
}
</style>
</head>
<body>
<div class="box" id="weibo">
<div>
<div class="title">有什么新鲜事想告诉大家</div>
<div class="num">还可以输入<span>140</span>字</div>
</div>
<div style="clear: both"></div>
<div class="input">
<textarea name="" id="txt" cols="20" rows="10"></textarea>
</div>
<div class="func">
<a id="btn">发布</a>
</div>
<div style="clear: both"></div>
<ul id="ul"></ul>
<div></div>
</div>
<script>
//需求:用户在文本域中输入内容 点击发布按钮 把文本域中的内容发布到ul中
//1.找人
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
var ul = document.getElementById("ul");
//2.点击按钮 把内容放到ul里
btn.onclick = function () {
if (txt.value.trim() === "") {
alert("请输入内容");
return;
}
var li = document.createElement("li");
var span = document.createElement("span");
span.innerText = txt.value;
li.appendChild(span);
var lis = ul.children;
if (lis.length === 0) {
ul.appendChild(li);
} else {
ul.insertBefore(li, lis[0]);
}
txt.value = "";
//4.添加删除按钮
//4.1创建按钮
var del = document.createElement("input");
del.type = "button";
del.value = "删除";
//4.2绑定事件
del.onclick = function () {
//点击当前按钮 让当前按钮 所处的li 从ul中移除
var li = this.parentNode;
ul.removeChild(li);
};
//4.3把按钮追加到当前li
li.appendChild(del);
};
</script>
</body>
</html>
微博的创建发布(js简单代码)
最新推荐文章于 2021-05-26 07:03:49 发布