简易留言板

最新推荐文章于 2024-07-20 18:16:53 发布

_Akui

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量320

点赞数

分类专栏： js 文章标签：前端 js

本文链接：https://blog.csdn.net/Akui1997/article/details/89319527

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

简易留言板

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>留言板</title>
	<style type="text/css">
      *{
      	 margin: 0;
      	 padding: 0;
      	 list-style: none;
      }
	</style>
</head>
<body>
	<ul id="liuyanban"></ul>
	<textarea name="" id="text" cols="30" rows="10"></textarea>
	<button id="liuyan" onclick="newlyb()">点击留言</button>
</body>
<script>
    var liuyb = document.getElementById("liuyanban");//留言板的ul
    function newlyb(){//点击留言的点击事件
        var value = text.value;//获取文本框的内容
        var li = document.createElement("li");//创建li   li一行一个留言
        var shijian = new Date();;//获取当前时间
            li.innerHTML = value + shijian;//往留言板里加入文本(value)和点击留言时的时间(shijian)
            liuyb.appendChild(li);//把创好的li加进ul里面
            text.value = "";//把写字的框里的值设为空值   相当于清空


        var btn = document.createElement("button");//创建一个button按钮
            btn.innerHTML = "删除";//button按钮里面的字设为删除
            li.appendChild(btn);//把按钮加进li里面
            btn.onclick = function(){//刚才删除按钮的点击事件
            	liuyb.removeChild(li);//删除ul里当前的li
            }
    }
</script>
</html>

这是我第一次写博客，作为一个新入行的小白我还有很多的不足之处，不过既然选择了这个行业，就不能半途而废，这个博客就权当做我一路成长过来的印记吧，有不足指出还请各位大佬多多指点。最近刚学完js，基础巩固的不算太好，继续加油吧！

_Akui

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
简易留言板

简易留言板<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>留言板</title> <style type="text/css"> *{ margin: 0; padding...
复制链接

扫一扫