JavaScript实现简单留言版

最新推荐文章于 2022-06-14 19:17:23 发布
最新推荐文章于 2022-06-14 19:17:23 发布
阅读量568 收藏 3
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44075557/article/details/103170543
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.wp{
				border: 1px #1B1B1B solid;
				height: 600px;
				width: 500px;
				margin: 20px auto;
				position: relative;
				background: url(bg.jpg);
				background-size: 100% 100%;
				/*border-radius: 5%;*/
				
			}
			#window{
				width: 500px;
				height: 300px;
				border-bottom: 1px #B3D4FC solid;
				position: absolute;
				top: 0;
				left: 0;
				overflow: auto;
			}
			#txt{
				position: absolute;
				bottom: 40px;
				left: 0;
				height: 200px;
				border-top: 1px #0077AA solid;
				width: 100%;
				cursor: pointer;
				font-size: 20px;
				background: #888888;
				/*border-radius: 10%;*/
			}
			#btn{
				width: 80px;
				height: 40px;
				position: absolute;
				bottom: 0;
				right: 20px;
			}
			#window li{
				list-style-type: none;
				font-size: 20px;
				margin-top: 10px;
				border: 1px #444444 solid;
				color: #FFFFFF;
				height: 40px;
				line-height: 40px;
				
			}
			#window input{
				float: right;
				height: 40px;
				width: 80px;
			}
			input:hover{
				background: #F00000;
				color: #FFFFFF;
				border: 0;
			}
		</style>
	</head>
	<body>
		<div class="wp">
			<div id="window">
			<!--	<li>1</li>-->
			</div>
			<textarea id="txt" value="1"></textarea>
			<input type="button" id="btn" value="发送" />
		</div>
	</body>
	<script type="text/javascript">
		var txt1=document.getElementById("txt");
		var btn=document.getElementById("btn");
		
		btn.onclick=function(){
			var txt2=document.getElementById("txt").value;
			var txt=txt2.trim();
			if(txt!=''){
//			console.log(txt.value);
var win=document.getElementById("window");
//创建一个新的li
var gg=document.createElement('li');
//创建一个新的文本节点
var ggText=document.createTextNode(txt);
//将文本节点添加到li中
gg.appendChild(ggText);
//将li添加到win中，用来显示
   win.appendChild(gg);
// console.log(txt1.value);
   txt1.value='';
   var btn2=document.createElement('input');
   btn2.type='button';
   btn2.value='删除';
   gg.appendChild(btn2);
   btn2.onclick=function(){
   var cor=confirm('你确定删除吗？');
   if(cor){
     var en=this.parentNode;       
     console.log(en);
    en.parentNode.removeChild(en);
   }
   }
   }else{
			alert('输入不能为空！');
   }
		}
	</script>
</html>

逻辑很简单，我也是个菜鸡，所有大佬手下留情

愁白了少年头
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript# DOM实现留言板
cathei的博客
07-18 1771
        &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Document&lt;/title&gt;     &lt;style&gt;         .wrap{   
javascript简易留言板
wz13759497175的博客
01-15 2829
效果图如下: 原理很简单，就是在点击确定按钮后添加节点 CSS代码： *{ margin: 0; padding: 0; } .title{ text-align: center; padding: 20px; height: auto; background: #E6E6FA; font-size: 20px; margin
JS实现简单留言板
allen111333的博客
04-21 1285
通过js的HTML DOM来实现对html文档的操作。 　　使用方法：Node.appendChild(); 　　　　　　　Node.insertBefore(); Node.removeChild(); <script type="text/javascript"> var count=0; win...
JavaScript实现简易留言板
dy799的博客
02-27 1228
留言板 需要实现的功能 Ⅰ，最新留言显示在最上边 Ⅱ，有删除功能 Ⅲ，点击留言后清空input内容 实现功能 Ⅰ，HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie
js 实现简易留言板功能
weixin_30618985的博客
04-26 470
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
js做简易留言板
datuzidppd5556的博客
08-06 419
有一点编程基础的同学都能看懂 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
【JavaScript源代码】javascript实现简单留言板案例.docx
12-29
JavaScript 实现简单留言板案例 在Web开发中，留言板是一个常见的功能，它允许用户发表评论并与网站其他用户互动。本文将详细介绍如何使用JavaScript实现一个简单的留言板，包括不允许空评论、新评论推旧评论以及...
JavaScript实现动态留言板
10-15
JavaScript实现动态留言板的知识点涵盖了前端开发的多个方面，包括HTML、CSS、JavaScript基础及DOM操作。以下是对给定文件内容中知识点的详细介绍： 1. HTML基础 在实现动态留言板的过程中，首先需要了解的是基本的...
JavaScript实现留言板案例
11-20
在JavaScript实现留言板案例中，我们看到了一个简单的网页应用，它允许用户输入姓名和留言内容，并在页面上显示这些留言。这个应用主要涉及到HTML、CSS和JavaScript的交互，具体包括以下几个关键知识点： 1. **...
JavaScript实现简单留言板
qq_61320547的博客
06-14 827
JavaScript实现间单留言板
JS留言板添加和删除代码，简单，漂亮
12-25
简单的js留言板添加删除，页面漂亮简介，无刷新
js使用DOM操作实现简单留言板的方法
10-24
主要介绍了js使用DOM操作实现简单留言板的方法,涉及javascript中DOM操作的技巧,非常具有实用价值,需要的朋友可以参考下
JS实现简易留言板（节点操作）
11-21
本文实例为大家分享了JS实现简易留言板的具体代码，供大家参考，具体内容如下 今天的案例主要是对节点进行操作 创建节点、添加节点、删除节点以及为节点添加内容的操作。  就是一个简单的留言板功能，可以发布留言，删除留言。 主要思路：两个鼠标点击事件——点击发布按钮事件和点击删除按钮事件 发布按钮事件：首先在文档中创建li节点。然后第二步，先把文本域中的内容获取出来赋给li，这里要注意，文本域是表单元素，获取表单元素的内容是使用表单的特有属性value，要与普通元素获取内容的innerHTML进行区分；再把删除链接添加到li中，利用字符串拼接的方式。最后把li节点添加到ul中，添加的方式有两种，是直
javascript实现留言板功能
11-21
本文实例为大家分享了javascript实现留言板功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ /*设置最外层盒子*/ width: 600px; border: 1px solid #aaa; padding: 20px 10px; margin: 100px auto; } #plTxt{ /*设置
JavaScript DOM——【小案例】简易留言板
DebbyOctober的博客
08-26 626
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> ul{list-style: none;} #box{ margin-top:30px; margin-left: 360px; width:800px; height:500px; border:2px solid
JS实现简易留言板功能
qq_48954625的博客
12-26 6885
JS实现简易留言板功能
使用JavaScript DOM制作简单留言板
weixin_42442856的博客
12-14 1187
效果图： 先准备html代码： <body> <textarea name="" id=""></textarea> <button>发布</button> <ul> </ul> </body> css代码如下： <style> * { margin: 0; padding: 0; .
简易的 js 留言板
weixin_30640769的博客
12-02 801
没事 做的 一个小玩意 ，练练手。大神勿喷，有些 不会写的，希望大神指教。 HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>留言板</title> <link rel="stylesheet...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值