留言板的写法

作者: 一只小裸熊 | 来源:发表于2016-08-06 19:30 被阅读0次

留言板的写法
2018-11-12
JS面向对象-灵活的语言
留言板
模块化
ES6 模块化
实例：PHP+MySQL开发留言板
kotlin_常量（Java中的static变量或函数）
新媒体笔记：各种推广式写法，你知道几个？
jquery 无限加载+Jasonp+瀑布流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        #wrap{
            width: 370px;
            border:1px solid rgb(193,193,193);
            padding: 20px;
            background: rgb(243,243,243);
        }
        #txt1{
            width: 315px;
            height: 20px;
        }
        #s1{
            display: inline-block;
            position: relative;
            top: -140px;
        }
        #btn1{
            width: 100px;
            height: 30px;
            font-size: 16px;
            color: rgb(100,100,100);
            background: rgb(249,249,249);
            border:1px solid rgb(203,203,203);
            margin-left: 40px;
        }
        #h2{
            padding-top:10px;
        }
        a{
            float: right;
        }
    </style>
</head>
<body>
    <!--  结构  --> 
    <div id="wrap">
        <span>姓名:</span>
        <input type="text" id="txt1"><br><br>
        <span id="s1">内容:</span>
        <textarea name="" id="txta" cols="50" rows="10" style="resize: none;"></textarea><br><br>
        <button id="btn1">提交</button>
        <h2 id="h2">显示留言</h2>
        <div id="main"></div>
    </div>
    <!--  行为  -->
    <script>
        function bind(){
            //获取元素
            var txt = document.getElementById('txt1');
            var txta = document.getElementById('txta');
            var btn = document.getElementById('btn1');
            var wrap = document.getElementById('wrap');

            //提交按钮的点击事件
            btn.onclick = function click(){
                //创建两个 p 标签和一个div
                var p1 = document.createElement('p');
                var p2 = document.createElement('p');
                                //创建一个div来包裹p1和p2
                var main = document.createElement('div');
                //将输入的内容分别给两个 p 标签
                var con1 = txt.value;
                var con2 = txta.value;
                                //把txt和txta里面的内容给p1和p2，然后在网页中打印出来
                p1.innerHTML = con1;
                p2.innerHTML = con2 + "<a href='###'>删除</a>";
                //判断当用户没输入内容时弹出提示
                if(txt.value == "" || txta.value == ""){
                    alert('用户名或内容未填写');
                }else{
                    //将 p 标签的内容添加到一个大的div里面
                    main.appendChild(p1);
                    main.appendChild(p2);
                    //将div里内容添加到主页面wrap中
                    wrap.appendChild(main);
                }
                //点击提交按钮清空文本框和文本域里的内容
                txt.value = "";
                txta.value = "";

                //p1的样式
                p1.style.height = '40px';
                p1.style.paddingLeft = '10px';
                p1.style.backgroundColor = 'rgb(220,220,220)';
                p1.style.borderBottom = '1px solid rgb(203,203,203)';
                p1.style.lineHeight = '40px';
                //p2的样式
                p2.style.height = '30px';
                p2.style.paddingLeft = '50px';
                p2.style.backgroundColor = 'rgb(253,253,253)';
                p2.style.borderBottom = '1px solid rgb(203,203,203)';
                p2.style.lineHeight = '30px';
                //
                main.style.transition = 'all 2s';
                //a标签的获取和点击事件
                var anchor = p2.getElementsByTagName('a');
                anchor[0].onclick = function(){
                        //移除对象
                        wrap.removeChild(main);
                }
            }
        }
        bind();
    </script>
</body>
</html>