ECMAScript 6.0 

<!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;
}
posted @ 2021-02-26 09:12  德乌姆列特  阅读(45)  评论(0)  编辑  收藏  举报