• 技术文章 >web前端 >前端问答

    javascript怎么实现留言

    藏色散人藏色散人2022-01-18 14:37:34原创376

    javascript实现留言的方法:1、创建一个HTML示例文件并输入input标签;2、输入script标签;3、通过js代码“oPostBtn.onclick = function(){...}”实现留言即可。

    本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    javascript怎么实现留言?

    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("p");
    				oTime.className = "time";
    				var myDate = new  Date();
    				oTime.innerHTML = myDate.toLocaleString();
    				oMessageBox.appendChild(oTime);
    				
    				//写入留言内容
    				var oMessageContent = document.createElement("p");
    				oMessageContent.className = "message_content";
    				oMessageContent.innerHTML = oInput.value;
    				oInput.value = "";
    				oMessageBox.appendChild(oMessageContent);
    			}
    			
    		}
    		
    	}
    
    </script>

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

    <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>

    推荐学习:《js基础教程

    以上就是javascript怎么实现留言的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:javascript有空值吗 下一篇:如何解决javascript json 乱码问题
    千万级数据并发解决方案

    相关文章推荐

    • 在JS中如何实现留言板功能• html怎么操作来实现留言板样式?(代码示例)• ajax实现局部刷新页面--留言刷新• PHP7留言板开发之代码优化
    1/1

    PHP中文网