国瑞个人博客

利用js实现简单的文章发布

利用js实现简单的文章发布

2018年07月27日作者: 国瑞个人博客 315次浏览

JavaScript 是世界上最流行的编程语言。这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

html部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul{
list-style-type: none;}
*{margin:0;padding: 0;}
.box {
margin: 100px auto;
width: 600px;
height: auto;
border:1px solid #333;
padding: 30px 0;
}
textarea {
width: 450px;
resize: none; /*防止用户拖动右下角*/
}
.box li {
width: 450px;
line-height: 30px;
border-bottom:1px dashed #ccc;
margin-left: 80px;
}
.box li a {
float: right;
}
</style>
</head>
<body>
<div class="box">
文章发布: <textarea name="" id="" cols="30" rows="10"></textarea> <button>发布</button>
</div>

</body>
</html>

javascript部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<script>
window.onload = function(){
//获取对象再次操作对象
var btn = document.getElementsByTagName("button")[0];
var txt = document.getElementsByTagName("textarea")[0];
var ul = document.createElement("ul"); // 创建ul
btn.parentNode.appendChild(ul); // 追加到他的父亲里面
btn.onclick = function(){
if(txt.value == "")
{
alert("输入不能为空");
return false; // 终止函数执行
}
var newli = document.createElement("li");
newli.innerHTML = txt.value + "<a href ='javascript:;'>删除</a>"; // 吧表单的值给新li

txt.value = ""; // 清空表单
var lis = ul.children; // 获得有多少个li

// if else 这个片段让我们新发布的内容最上显示
if(lis.length == 0) // 第一次创建
{
ul.appendChild(newli); // ul 的后面追加
}
else
{
ul.insertBefore(newli,lis[0]); // 每次生成的新的li 放到第一个li 的前面
}
var as = document.getElementsByTagName("a"); // 获得所 a
for(var i=0; i<as.length;i++)
{
as[i].onclick = function(){
//removeChild
ul.removeChild(this.parentNode); // UL 他的爸爸

// a 的粑粑是 li

}
}

}
}
</script>

百度已收录

点击快速分享：

以上就是国瑞前端个人博客带来的是《利用js实现简单的文章发布》，感谢您的观看！

如果没有特殊的说明，本文即为国瑞前端博客原创(www.huanggr.cn)，欢迎读者转载并保留本站版权！https://www.huanggr.cn/278.html

「专业前端博客，如果觉得我的文章对您有用，请帮助本站成长」

赞( 0 ) 打赏

标签：

上一篇：Php实现简单的后台验证

下一篇：Es6中的扩展运算符

相关文章：

* 暂无相关文章

共有 0 条评论

点击这里取消回复。

博客简介

国瑞个人博客: https://www.huanggr.cn/，我们关注Web前端开发技术，web前端开发,移动前端开发，前端资讯，同时分享前端资源和工具等，期待你的参与,了解更多..

前端开发 web前端技术新手Web技术 Web资源分享国瑞前端博客

国瑞个人博客：
是啊，要是考得上的话
评：博主参加专升本去了
唯品秀博客：
教书吗
评：博主参加专升本去了
国瑞个人博客：
虽说用vue也可以实现jQuery一样的效果，但是写起来太复杂，jQuery就很方便，所以为...
评：nuxt如何来引入jQuery库
国瑞个人博客：
这个时候，就需要使用到nuxt.js来将页面渲染出蜘蛛爬虫可抓取的页面
评：nuxt如何来引入jQuery库
国瑞个人博客：
vue.js因为使用的是html5的hash来实现页面的切换，所以蜘蛛爬虫是怕去不了的
评：nuxt如何来引入jQuery库
国瑞个人博客：
哈哈哈，欢迎来访，这文章是不是很给力！
评：如何自学前端页面编程_找到工作

文章总数： 263 篇
草稿数目： 51 篇
分类数目： 25 个
页面总数： 16 个
评论总数： 139 条
链接总数： 9 个
标签总数： 100 个
建站时间： 774 天
注册用户： 632 人
访问总量： 8755097 次
最近更新： 2019年6月16日

-->