js 实现留言板

效果图展示

js 实现留言板

 

 实现用户所传内容 以及时间

<script>

    window.onload = function(){
        
        var oMessageBox = document.getElementById("messageBox");
        var oInput = document.getElementById("myInput");
        var oPostBtn = document.getElementById("doPost");
        
        oPostBtn.onclick = function(){
            if(oInput.value){
                //写入发表留言的时间
                var oTime = document.createElement("div");
                oTime.className = "time";
                var myDate = new  Date();
                oTime.innerHTML = myDate.toLocaleString();
                oMessageBox.appendChild(oTime);
                
                //写入留言内容
                var oMessageContent = document.createElement("div");
                oMessageContent.className = "message_content";
                oMessageContent.innerHTML = oInput.value;
                oInput.value = "";
                oMessageBox.appendChild(oMessageContent);
            }
            
        }
        
    }

</script>

通过获取input的输入焦点事件抓取内容,传递给留言板的div来展示

<body>
    <div class="content">
        <div class="title">用户留言</div>
        <div class="message_box" id="messageBox"></div>
        <div><input id="myInput" type="text" placeholder="请输入留言类容"><button id="doPost">提交</button></div>
    </div>
</body>

 

上一篇:一键复制效果实现


下一篇:前端实现拷贝功能