Jquery来制作简易版的留言板.

效果图:

代码如下:

<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>制作留言板</title><style>*{margin:0;padding:0;/* box-sizing:border-box; */}.lyb_div{width:60%;border:1px solid #ccc;}.lyb_div header div input:nth-of-type(1){width:300px;height: 32px;line-height: 32px;border:1px solid #ccc;border-radius:5px;color:#ccc;}.lyb_div header div{margin-bottom: 10px;}.lyb_div header div,.lyb_div .section{color:#999;font-size: 16px;}.lyb_div .section textarea{width:300px;height: 200px;border:1px solid #ccc;border-radius:5px;color:gray;}.lyb_div .section .tj_btn{width:100%;}.lyb_div .section .tj_btn button:nth-of-type(1){background-color: green;color:white;border:1px green solid;padding:5px 10px;border-radius: 5px;margin-left:10%; border: none;outline: none; }.lyb_div footer{border:2px dodgerblue solid;margin:10px 30px;border-radius: 5px;padding:0 0  30px 0;}.lyb_div footer p{color:white;background-color:dodgerblue;text-indent: 32px;font-size: 14px;padding:3px 0;}.lyb_div footer ul:nth-of-type(1){margin:10px 20px 10px 20px;}.lyb_div footer ul:nth-of-type(1) li{list-style: none;height: 20px;border:1px solid #ccc;color:#999;font-size: 12px;}</style>
</head>
<body><div class="lyb_div"><!-- top --><header><div><label class="col-sm-1 control-label">昵称：</label><input type="email" class="form_control name" placeholder="请输入昵称"></div></header><!-- center --><div class="section"><label class="col-sm-1 control-label">留言：</label><textarea class="form_control message" rows="5" cols="20">请输入内容</textarea><br/><div class="tj_btn"><button class="sumbit">提交留言</button></div></div><!-- bottom --><footer><p>留言列表</p><ul class="list_group messageList"></ul></footer></div><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script src="../js/index.js"></script>
</body>
</html>

js代码:

$(function(){const m = new Map();//数据 存入的是对象类型 键值对方式//定义全局变量(展示留言从map中添加数据，所有要定义全局使用)//提交留言$('.sumbit').click(()=>{let _name=$(".name").val(),//昵称_msg=$(".message").val();//留言m.set(_name,_msg);//存入数据 listShow();});//展示留言(通过循遍历for of的方式来展示数据)let listShow = () =>{let str ="";//定义一个变量 不断的添加进去for(let [key,value] of m){//messageliststr +=`<li class="list-group-item">${key}<span>说:</span>${value}</li>`};console.log($('.messageList').html(str));}
})

总结:这里只是写了一个简易版的，后续可以增加更多的功能实现,例如:1.添加后当前内容清空，2.昵称输入时可以做正则判断输入多少位字符，等等…

Jquery来制作简易版的留言板.相关推荐

html语言制作留言条,利用DIV+CSS制作右下角弹出留言板
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 利用DIV+CSS制作右下角弹出留言板 a ...
C/C++制作简易版贪吃蛇游戏
文章目录 C/C++制作简易版贪吃蛇游戏一.开发环境二.设计逻辑三.代码块 3.1 使用initgraph()函数 3.2定义蛇和食物的结构体 3.3随机产生食物的坐标以及定义初始化的蛇的数据 ...
html+css制作简易版Baymax
</pre>大白的简易版图片如下,我用html+css来制作简易版的大白.<img src="https://img-blog.csdn.net/2016012418583 ...
js计算器代码加减乘除_如何用jQuery做一个简易版计算器
经过几个小时地敲敲打打,终于把这一部分的代码完成了. 这类问题的难点不在于布局,而是如何恰当地使用jQuery达成计算.交互的目的,比如储存.显示数值,数据类型的转换等. 在听老师讲课之前的我,思路是 ...
在直播APP系统源码中基于腾讯视频云SDK制作简易版直播回放播放器
在直播App系统中,当主播结束之后,我们需要使用播放器观看直播的一些回放片段,在观看回放的过程中,我们会使用到开始,暂停,控制播放位置,进度监听,全屏等功能,然而腾讯点播并没有提供这些简单的控制功能, ...
python做飞机大战游戏单机_Python制作简易版飞机大战小游戏
开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块. 相关文件欢迎与我交流环境搭建安装Python并添加到环境变量,pip安装需要的相关模块即 ...
留言板asp mysql_ASP简单入门(制作一个简单的留言板 )
语句 -- %> <2>定义变量dim语句 dim a,b a=10 b="ok!" %> 注意:定义的变量可以是数值型,也可以是字符或者其他类型的 < ...
android聊天界面与功能,【android】聊天界面的制作-简易版实现
看完了第一行代码第三章,改进了一些基本功能,下面就听小弟一一道来: 也参考了很多别人的代码,但是总觉得一些功能可以比较轻松的实现就不绕那么多弯子,就用最基础的码代码实现一样的功能:(1)整体布局代码一 ...
网页制作---简易版B站
本人实在太懒,做的及其粗糙,在此只是抛砖引玉,细节读者可自行补充. 效果图如下: 头部: 导航栏:(鼠标放到图标上会自动弹出视频详情) 直播导航页: 番剧导航页: 站内音乐导航页: 仿制网页尾部 ...

Jquery来制作简易版的留言板.

Jquery来制作简易版的留言板.相关推荐

最新文章

热门文章