js+css+html制作简易留言板

js+css+html制作简易留言板

  • 1 案例说明
  • 2 编写HTML代码
  • 3 编写css代码
  • 4 编写JavaScript代码
  • 5 全部代码

1 案例说明

利用JavaScript、css以及html制作简易留言板,也可以看作是简易评论区。

要求在页面文本框中输入一些文字之后,点击“发布”按钮,就可以让输入的文字显示在下面,重新输入一些文字,再点击发布,就可以让新发布的内容显示在最上面。点击后面的删除,就可以删除已经发布的文字。

【案例分析】利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。在页面中实现单击“发布”按钮动态创建一个li元素,添加到ul里面。

效果图:
js+css+html制作简易留言板_第1张图片
点击发布之后:
js+css+html制作简易留言板_第2张图片
再输入一行文字:
js+css+html制作简易留言板_第3张图片
点击发布:
js+css+html制作简易留言板_第4张图片
点击最下面的那一条删除之后:
js+css+html制作简易留言板_第5张图片

2 编写HTML代码

在HTML页面中的元素比较简单,需要一个