留言板 js

最新推荐文章于 2023-08-29 17:29:08 发布
最新推荐文章于 2023-08-29 17:29:08 发布
阅读量520 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingchanW/article/details/52446671
版权

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

a{

text-decoration: none;

color: orange;

}

.wrap{

width: 600px;

height: 200px;

border: 1px solid gainsboro;

border-radius: 5px;

margin: 0 auto;

}

.top{

height: 40px;

width: 100%;

overflow: hidden;

}

.top-left{

width: 80px;

height: 100%;

line-height: 40px;

font-size: 20px;

color: orange;

float: left;

margin-left: 20px;

}

.top-right{

float: right;

width: 60%;

height: 100%;

line-height: 40px;

padding-right: 20px;

text-align: right;

}

.middle{

width: 100px;

height: 100px;

}

.middle textarea{

width: 570px;

height: 90px;

margin-left: 15px;

border: 1px solid gainsboro;

resize: none;

outline: none;

}

.bottom{

height: 60px;

width: 100%;

overflow: hidden;

}

.bottom-left{

height: 100%;

width: 350px;

float: left;

}

.bottom-left div{

height: 100%;

width: 70px;

text-align: center;

line-height: 50px;

float: left;

}

.bottom-left div span:hover{

color: orange;

}

.bottom-right{

float: right;

width: 80px;

height: 40px;

background-color: orange;

color: white;

text-align: center;

line-height: 40px;

margin-right: 11px;

font-size: 20px;

border-radius: 5px;

}

.message{

width: 600px;

min-height: 650px;

border: 1px solid gainsboro;

border-radius: 5px;

margin: 0 auto;

}

/*为js准备的样式*/

.big{

width: 580px;

/*height: 100px;*/

border: 1px solid gray;

margin-left: 9px;

margin-top: 10px;

position: relative;

top: -75px;

opacity: 0.1;

}

.name{

width: 100px;

height: 30px;

line-height: 30px;

padding-left: 10px;

font-weight: bold;

}

.mes{

width: 100%;

line-height: 30px;

padding-left: 10px;

word-wrap: break-word;

}

.date{

width: 200px;

height: 30px;

line-height: 30px;

padding-left: 10px;

color: gray;

}

.close{

width: 20px;

height: 20px;

position: absolute;

right: 10px;

top: 10px;

}

</style>

</head>

<body>

<div class="wrap">

<div class="top">

<div class="top-left">

LOGO

</div>

<div class="top-right">

<a href="###">点击领取红包</a>

</div>

</div>

<div class="middle">

<textarea name="" rows="" cols=""></textarea>

</div>

<div class="bottom">

<div class="bottom-left">

<div><span>表情</span></div>

<div><span>图片</span></div>

<div><span>视频</span></div>

<div><span>话题</span></div>

<div><span>文章</span></div>

</div>

<div class="bottom-right" οnclick="addRow()">

发布

</div>

</div>

</div>

<div class="message"></div>

<script type="text/javascript">

//第一步取东西

//带()方法

//这两个方法返回值是一个数组

var message = document.getElementsByClassName("message")[0];

var txt = document.getElementsByTagName("textarea")[0];

//拿出a标签

var  topRight = document.getElementsByTagName("a")[0];

//字数

var txtlimit = 140;

//点击发布会响应的函数

function addRow(){

if(!txt.value.length){

alert("sp,没文字发什么发!");

}else{

alert("dsp,发布成功");

//创建bigDiv

var bigDiv = createDiv("","big");

//创建昵称div{

var nickDiv = createDiv("dsp","name");

bigDiv.appendChild(nickDiv);

//创建文本div

var contentDiv = createDiv(txt.value,"mes")

bigDiv.appendChild(contentDiv);

//创建时间div

//函数参数带有函数,带有的函数会先执行,视为返回值的结果

var timeDiv = createDiv(createDate(),"date")

bigDiv.appendChild(timeDiv);

//删除div

var closeDiv  = createDiv("×","close");

closeDiv.onclick = function(){

message.removeChild(bigDiv);

}

bigDiv.appendChild(closeDiv);

message.insertBefore(bigDiv,message.firstElementChild);

// textlimit = 140;

txt.value= "";

}

startMove(bigDiv,{top:0,opacity:1});

}

function createDiv(txt,className){

var div = document.createElement("div");

div.innerHTML = txt;

div.setAttribute("class",className);

return div;

}

function createDate(){

var myDate =new Date();

var momth = myDate.getMonth()+1;

var day = myDate.getDate();

var hour = myDate.getHours();

var minute = myDate.getMinutes();

return momth+"月"+day+"日"+hour+"时"+minute+"分"+"发布";

}

//当手指离开键盘的时候出发

txt.onkeyup = function(){

textlimit = 140 - txt.value.length;

topRight.innerHTML = "还可以输入"+textlimit+"字";

if (textlimit<0) {

// alert("请手下留情哦");

topRight.innerHTML = "超过"+(txt.value.length-140)+"字";

// alert(topRight.innerHTML);

}

}

//失去焦点的时候会触发

txt.onblur = function(){

topRight.innerHTML = "点击领取红包";

topRight.style.color = "";

}

//获得焦点的时候会触发

txt.onfocus = function(){

//当前剩余字数

textlimit = 140 - txt.value.length;

topRight.innerHTML = "还可以输入"+textlimit+"字";

topRight.style.color = "grey";

if (textlimit<0) {

topRight.innerHTML = "超过"+(txt.value.length-140)+"字";

}

}

</script>

// 完美运动框架（在前面已上传）

<script src="js/perfectMove.js" type="text/javascript" ></script>

</body>

</html>



kingchanW
关注
js留言板
weixin_54420874的博客
03-17 1809
1、我写的是一个留言板的小案例，我在老师的基础上做出自己想要的效果。 2、先把大致的轮廓给敲出来。需要的是一个文本域和一个按钮、还有无序列表。 3、基本轮廓有了，现在来设置它的样式。内外边距都为零、使用类选择器选择到‘div’，使用到ID选择器选择到文本域‘textarea’。 4、这里说一下，“div”是html超文本标签里面标签-大部分用于包裹里面的内容。相当于是一个箱子里面可以装任何内容，装它本身都可以。 5、‘#list’这里选择到的是无序标签，无序标签里面放置的是留言语，‘
JS实现留言板功能
10-19
主要为大家详细介绍了JS实现留言板功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js 留言板
weixin_43987633的博客
11-28 579
js 留言板 小可爱要我给她写一个独有的留言板，我用上了我最近刚看的视频，做了一个简单的留言板： <h1>写给我的小可爱</h1> <div class="list"> <ol id="ol"></ol> </div> <textarea id="message" cols=...
简易的 js 留言板
weixin_30640769的博客
12-02 803
没事 做的 一个小玩意 ，练练手。大神勿喷，有些 不会写的，希望大神指教。 HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>留言板</title> <link rel="stylesheet...
使用js实现留言板效果
最新发布
xiaocantongxue的博客
08-29 590
【代码】使用js实现留言板效果。
JavaScript实现留言板案例
10-15
标题中的“JavaScript实现留言板案例”指的是使用JavaScript编程语言来创建一个基本的在线留言板功能。这个功能允许用户在网页上输入姓名和留言内容，并且能够显示和删除这些留言。描述中提到，示例代码详尽地解释了...
基于JavaScript实现留言板功能
10-15
3. JavaScript事件处理：JavaScript是实现留言板功能的核心。首先，通过获取页面元素的DOM引用，然后为发送按钮添加点击事件监听器，在事件触发时，从textarea获取用户输入的留言内容，创建新的li元素，并将其添加到...
JavaScript实现动态留言板
10-15
JavaScript实现动态留言板的知识点涵盖了前端开发的多个方面，包括HTML、CSS、JavaScript基础及DOM操作。以下是对给定文件内容中知识点的详细介绍： 1. HTML基础 在实现动态留言板的过程中，首先需要了解的是基本的...
JS实现简易留言板（节点操作）
11-21
本文实例为大家分享了JS实现简易留言板的具体代码，供大家参考，具体内容如下 今天的案例主要是对节点进行操作 创建节点、添加节点、删除节点以及为节点添加内容的操作。  就是一个简单的留言板功能，可以发布留言，删除留言。 主要思路：两个鼠标点击事件——点击发布按钮事件和点击删除按钮事件 发布按钮事件：首先在文档中创建li节点。然后第二步，先把文本域中的内容获取出来赋给li，这里要注意，文本域是表单元素，获取表单元素的内容是使用表单的特有属性value，要与普通元素获取内容的innerHTML进行区分；再把删除链接添加到li中，利用字符串拼接的方式。最后把li节点添加到ul中，添加的方式有两种，是直
JS实现简易留言板特效
11-29
本文实例为大家分享了JS实现留言板特效的具体代码，供大家参考，具体内容如下 知识点 1.textarea 大段输入框 2.value获取输入框的值 3[removed]所用东西；innerText文本 4.insertBefore在某个标签之前插入 运行效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin: 0;padding: 0;list-style: none;} #box{width: 800px;
JS留言板添加和删除代码，简单，漂亮
12-25
简单的js留言板添加删除，页面漂亮简介，无刷新
JS——利用JS实现简易留言板
Bonsoir777的博客
08-26 9487
本文主要阐述如何利用js实现简易留言板的实现过程
js实现留言板
xuehaocyuyan的博客
07-02 2653
具体的实现看以下代码，代码包含详细注释。效果图如下 输入内容为空 发布： 删除： 完整代码如下： <!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写留言板
qq_50471372的博客
04-13 143
这是css <style> * { padding: 0; margin: 0; } body { width: 100%; height: 100%; background: rgb(65, 65, 63); } .bacground { width: 700px;.
JS留言板
solar_lcx的博客
06-15 324
先设置留言板的样式 然后下面是留言板的JS部分，仅供参考 最后是留言板的整体效果 这是我所学到JS留言板，所以我要分享给你们，希望可以帮助到你们。以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！...
Js实现留言板功能
lzsan_的博客
03-31 1759
在文本框中输入想要留言的内容，点击留言按钮实现留言，点击删除实现删除 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi.
html留言板js
06-01
以下是一个简单的 HTML 留言板的 JavaScript 实现： HTML 代码： ```html <!DOCTYPE html> 留言板 留言板 姓名： <input type="text" id="name" required><br> 留言： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值