<!DOCTYPE>
<html lang="zh-en">
<head>
<title>js实现简单留言板</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/demo.css" rel="stylesheet"/>
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="container">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-1 control-label">昵称：</label>
<div class="col-sm-11">
<input type="email" class="form-control name" id="inputEmail3" placeholder="请输入昵称">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">留言：</label>
<div class="col-sm-11">
<textarea class="form-control message" rows="5" placeholder="请输入内容"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<button type="submit" class="btn btn-success submit">提交留言</button>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">留言列表</div>
<div class="panel-body">
<ul class="list-group messageList">
<!-- <li class="list-group-item">张三
<span>说：</span>大家好！
</li> -->
</ul>
</div>
</div>
</div>
</body>
</html>
$(function(){
let m = new Map(); //var m ={}
//提交留言
$(".submit").click(()=>{
let _name = $(".name").val(),
_msg = $(".message").val();
if(!_name || !_msg){
alert("请输入信息")
}else {
m.set(_name,_msg); //数据存入MAP
$(".name,.message").val('');
list();
}
});
let list =()=> {
let str = '';
for(let [key,value] of m) { //遍历
str+=`<li class="list-group-item">${key}<span>说：</span>${value}</li>`
};
$(".messageList").html(str);
}
})
*{
margin: 0 auto;
padding: 0;
font-family: "Microsoft YaHei","sans-serif";
}
.container{
margin-top:20px;
}
.btn {
padding: 5px 10px;
}