js简易留言板

最新推荐文章于 2023-08-29 17:29:08 发布
最新推荐文章于 2023-08-29 17:29:08 发布
阅读量131 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/myjayce/p/10269335.html
版权
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 .wrap {
 width: 400px;
 margin: 30px auto;
 }
 textarea {
 display: block;
 width: 100%;
 height: 60px;
 }
 input {
 display: block;
 width: 60%;
 margin: 15px auto;
 }
 li {
 padding: 5px 10px;
 position: relative;
 word-break: break-all;
 }
 .red {
 color: #000;
 background: #f1f1f1;
 }
 .pink {
 color: #000;
 background: #ccc;
 }
 a {
 position: absolute;
 right: 0;
 top: -20px;
 background: yellow;
 color: #fff;
 }
 #list {
 margin: 0;
 padding: 0;
 list-style: none;
 font: 14px/26px "宋体";
 }
 .clos {
 position: absolute;
 top: 0;
 right: -50px;
 width: 50px;
 color: #fff;
 background: #000;
 padding: 5px 0;
 text-decoration: none;
 text-align: center;
 }
 .clos:hover {
  
 }
 </style>
 <script type="text/javascript">
 window.onload = function(){
 var btn = document.querySelector('input');
 var text = document.querySelector('textarea');
 var list = document.querySelector('#list');
 var colors = ["red","pink"];
 var nub = 0;
 btn.onclick = function(){
 if(text.value.trim() == ""){
 alert("输入内容不能为空");
 return false;
 }
 var li = document.createElement("li");
 li.innerHTML = text.value;
 // li.className = colors[nub%colors.length];
 /* 判断a标签已经被添加，就让a标签显示出来，否则就添加 */
 if(list.children[0]&&list.children[0].className=="red"){
 li.className = "pink";
 } else {
 li.className = "red";
 }
 var a = null;
 li.onmouseover = function(){
 if(a) {
 a.style.display = "block";
 } else {
 a = document.createElement("a");
 a.href = "javascript:;";
 a.className = "clos";
 a.innerHTML = "删除";
 a.onclick = function (){
 list.removeChild(this.parentNode);
 };
 this.appendChild(a);
 }
 };
 li.onmouseout = function(){
 a.style.display = "none";
 };
 list.insertBefore(li,list.children[0]);
 text.value = "";
 nub++;
 };
 };
 </script>
 </head>
 <body>
 <div>
 <div class="wrap">
 <textarea id="text"></textarea>
 <input type="button" value="留言">
 <ul id="list"></ul>
 </div>
 </body>
 </html>
  

转载于:https://www.cnblogs.com/myjayce/p/10269335.html

dingcong5580
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现留言板
xuehaocyuyan的博客
07-02 2636
具体的实现看以下代码，代码包含详细注释。效果图如下 输入内容为空 发布： 删除： 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
JS实现简易留言板特效
10-15
在本文中，我们将探讨如何使用JavaScript（JS）实现一个简单的留言板特效。这个特效包括用户输入评论、显示评论列表以及提供删除评论的功能。以下是一些关键知识点和代码分析： 1. **textarea**: `textarea` 是HTML...
JS——利用JS实现简易留言板
Bonsoir777的博客
08-26 9326
本文主要阐述如何利用js实现简易留言板的实现过程
留言板的简单制作（html+css+javaScript)
Achen2282751920的博客
08-21 3164
使用一个js选择器的封装方法。
js实现留言板功能的简单逻辑
qq_61320547的博客
07-25 523
js实现留言板功能的简单逻辑
使用js实现留言板效果
xiaocantongxue的博客
08-29 573
【代码】使用js实现留言板效果。
vue-基于vue实现的简易留言板项目.zip
最新发布
05-04
【Vue.js 简易留言板项目详解】 Vue.js 是一款流行的前端JavaScript框架，以其轻量级、易上手和灵活性而受到开发者的喜爱。在这个基于Vue实现的简易留言板项目中，我们将深入探讨如何利用Vue.js的基本特性来构建一...
JS实现简易留言板增删功能
10-15
**JS实现简易留言板的增删功能详解** 在网页开发中，留言板是一个常见的功能，它允许用户发表评论或提出问题。本篇文章将详细讲解如何使用JavaScript（JS）来创建一个简单的留言板，实现留言的添加和删除功能。由于...
简易留言板HTML
04-03
【简易留言板HTML】是一个非常适合初学者研究和学习的项目，它涵盖了网页开发的基本元素，包括HTML结构、CSS样式以及简单的交互设计。这个项目的核心在于创建一个用户可以提交留言并查看他人留言的简单平台，这对于...
JS实现简易留言板（节点操作）
10-15
本文将介绍如何使用JavaScript实现一个简易的留言板功能，主要涉及HTML、CSS和JavaScript的节点操作。首先，我们需要一个HTML结构来承载留言板的基本元素，包括一个文本区域供用户输入留言，一个发布按钮触发留言...
网页制作QQ在线留言js+html
03-14
网页QQ在线留言，很好用，很好移植到自己的网页中
js实现日期列表 js实现日期列表
06-05
js日期列表 测试成功 欢迎下载 js日期列表 测试成功 欢迎下载 js日期列表 测试成功 欢迎下载 js日期列表 测试成功 欢迎下载 js日期列表 测试成功 欢迎下载 js日期列表 测试成功 欢迎下载 js日期列表 测试成功 欢迎下载 js日期列表 测试成功 欢迎下载
利用js做简易留言板
yuyangll的博客
05-19 1169
前段时间学习了JavaScript，学的网课视频老师利用js做了简易的留言板 最近趁空闲时间自己也敲了一边 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
js实现简单的留言板功能
jasmyn518的博客
12-11 2909
实现简单的留言板功能，只是简单的demo，并不能保存数据，如果刷新页面，数据就会丢失，输入内容点击留言按钮，输入的内容即会显示到页面上，同时加上删除按钮，可以删除当前数据。 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="content"> 聊天记录<ul id="words"></ul>
简单的Js留言板
wzj_119的专栏
05-24 8188
 简单的Js留言板 function Ok_OnClick(event) {  if(document.getElementsByName("textName")[0].value == ""){   alert("请输入内容");   return;   }  var table;  var tableList = document.getElementsByTagName("TABLE"); 
前端一个简单的留言板
03-23
一个简单的留言板
javascript简易留言板
10-12
以下是一个简易的 JavaScript 留言板的代码示例： HTML 代码： ``` <div> <input type="text" id="name" placeholder="请输入您的姓名"> <textarea id="message" placeholder="请输入留言内容"></textarea> <button onclick="addMessage()">提交留言</button> </div> <div id="messageList"></div> ``` JavaScript 代码： ``` function addMessage() { var name = document.getElementById("name").value; var message = document.getElementById("message").value; var messageList = document.getElementById("messageList"); var newMessage = document.createElement("div"); newMessage.innerHTML = "<strong>" + name + "：</strong>" + message; messageList.appendChild(newMessage); } ``` 这个留言板包含一个输入姓名和留言内容的表单，以及一个提交按钮。当用户点击提交按钮时，JavaScript 代码会获取表单中的姓名和留言内容，并将它们添加到留言列表中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值