语言吧技术网欢迎您投稿,程序员的世界我懂你!=====>点此登录投搞
当前位置: 首页 >>JAVASCRIPT >>javascript基础教程 >>javascript教程之HTMLCMS利用ES6箭头函数增加留言效果源码

javascript教程之HTMLCMS利用ES6箭头函数增加留言效果源码

2019/11/7 16:14:20 0人评论 25次 作者:admin

javascript教程之HTMLCMS利用ES6箭头函数增加留言效果源码…

<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>javascript教程之HTMLCMS利用ES6箭头函数增加留言效果源码</title>

</head>

<script language="javascript" src="jquery-1.11.3.min.js"  title="要记得引用本JQUERY库哦,可在网上下载一个"></script>

<style type="text/css">

    html, body {

        font-size: 12px;

    }


    .lykj {

        float: left;

        width: 600px;

        height: 800px;

    }


        .lykj > .lyk {

            float: left;

            width: 100%;

            height: auto;

            margin: 5px 0 0 0;

        }


            .lykj > .lyk > b {

                display: block;

                float: left;

                width: 100px;

                height: 20px;

                text-align: right;

            }


            .lykj > .lyk > input.nc {

                float: left;

                width: 300px;

                height: 20px;

                border: 1px solid #888;

            }


            .lykj > .lyk > textarea.ly {

                float: left;

                width: 300px;

                height: 200px;

            }


            .lykj > .lyk > input.nc {

                float: left;

                width: auto;

                height: auto;

                padding: 2px 10px;

            }


        .lykj > .xsk {

            float: left;

            width: 100%;

            height: auto;

            border: 1px solid #328EDB;

            margin: 20px 0 0 0;

        }


            .lykj > .xsk > .bt {

                float: left;

                width: 100%;

                height: auto;

                background: #328EDB;

                color: #fff;

                padding: 10px 0;

                text-indent: 10px;

            }


            .lykj > .xsk > ul {

                display: block;

                list-style-type: none;

                width: 100%;

                padding: 0px;

                margin: 0px;

            }


                .lykj > .xsk > ul > li {

                    display: block;

                    list-style-type: none;

                    padding: 5px 0;

                }


                    .lykj > .xsk > ul > li > b {

                        display: block;

                        float: left;

                        width: 200px;

                        text-align: right;

                    }


                    .lykj > .xsk > ul > li > span {

                        display: block;

                        float: left;

                        width: 300px;

                        text-align: right;

                    }

</style>

<body>

    <div id="box">

        <div>

            <b>昵称:</b><input type="text" name="nc" />

        </div>

        <div>

            <b>留言:</b><textarea name="ly"></textarea>

        </div>

        <div>

            <input type="button" name="tj" value="提交留言" />

        </div>

        <div>

            <div>留言列表</div>

            <ul id="HdhCmsList">

                <li>

                    <b>HDHCMS</b><span>好得很CMS</span>

                </li>

            </ul>

        </div>

    </div>

    <script>

        //$(".tj").click(function(){

        // var nc=$(".nc").val();

        // var ly=$(".ly").val();

        // var aa='<li><b>'+nc+'</b><span>'+ly+'</span> </li>';

        // $("#list").append(aa);

        //});

        $(function () {

            const m = new Map();

            $(".tj").click(()=>{

                let _nc=$(".nc").val(),

                _ly=$(".ly").val();

            m.set(_nc,_ly);

            HdhCmsToList();

        });

        let HdhCmsToList=()=>{

            let HdhCmsStr="";

            for(let[key,value] of m){

                HdhCmsStr += '<li><b>'+key+'</b><span>'+value+'</span></li>'

            };

            $("#HdhCmsList").html(HdhCmsStr);

        }

        })

    </script>

</body>

</html>

效果图:

1.jpg

上一篇:js日期格式转换

下一篇:ajax传值操作

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com
欢迎【广东省 广州市】的朋友
内容与素材部分来源于网络,如有侵权请告知删除
分享按钮