首页 > 代码库 > 模拟留言板
模拟留言板
<!--智能社© - http://www.zhinengshe.com/微博：@北京智能社微信：zhi_neng_she最具深度的前端开发培训机构 HTML+CSS/JS/HTML5--><!doctype html><html><head><meta charset="utf-8"><title>模拟留言板 - 智能社 - www.zhinengshe.com</title><style type="text/css">* { padding: 0; margin: 0; }li { list-style: none; }body { background: #f9f9f9; font-size: 14px; }#box { width: 450px; padding: 10px; border: 1px solid #ccc; background: #f4f4f4; margin: 10px auto; }#fill_in { margin-bottom: 10px; }#fill_in li { padding: 5px 0; }#fill_in .text { width: 380px; height: 30px; padding: 0 10px; border: 1px solid #ccc; line-height: 30px; font-size: 14px; font-family: arial; }#fill_in textarea { width: 380px; height: 100px; line-height: 20px; padding: 5px 10px; border: 1px solid #ccc; font-size: 14px; font-family: arial; overflow: auto; vertical-align: top; }#fill_in .btn { border: none; width: 100px; height: 30px; border: 1px solid #ccc; background: #fff; color: #666; font-size: 14px; position: relative; left: 42px; }#message_text { display: none; }#message_text h2 { font-size: 14px; padding: 6px 0 4px 10px; background: #ddd; border-bottom: 1px solid #ccc; }#message_text li { background: #f9f9f9; border-bottom: 1px solid #ccc; color: #666; overflow: hidden; }#message_text h3 { padding: 10px; font-size: 14px; line-height: 24px; }#message_text p { padding: 0 10px 10px; text-indent: 28px; line-height: 20px; }</style><script>window.onload=function (){ var oInp=document.getElementById(‘text‘); var oTextarea=document.getElementsByTagName(‘textarea‘)[0]; var oBtn=document.getElementById(‘btn‘); var oDiv=document.getElementById(‘message_text‘); var oUl=oDiv.getElementsByTagName(‘ul‘)[0]; oBtn.onclick=function (){ var sTit=oInp.value; var sText=oTextarea.value; var oLi=document.createElement(‘li‘); oLi.innerHTML=‘<h3>‘+sTit+‘</h3><p>‘+sText+‘</p>‘;//innerHTML离3插入标签式亮点 if( oInp.value =http://www.mamicode.com/= "" || oTextarea.value =http://www.mamicode.com/= "" ) { alert("二个框，你还不写全了啊？"); return; } if(oUl.children.length==0) { oUl.appendChild(oLi); oDiv.style.display=‘block‘; } else { oUl.insertBefore(oLi,oUl.children[0]); oDiv.style.display=‘block‘; } /*这种方式让我大脑洞开，狂欢呀*/ /*if(oUl.children[0]) { oUl.insertBefore(oLi,oUl.children[0]); oDiv.style.display=‘block‘; } else { oUl.appendChild(oLi); oDiv.style.display=‘block‘; }*/ oInp.value=‘‘; oTextarea.value=‘‘; oInp.focus(); };};</script></head><body><div id="box"> <ul id="fill_in"> <form> <li>姓名：<input id="text" type="text" class="text" /></li> <li>内容：<textarea></textarea></li> <li><input id="btn" type="button" value=http://www.mamicode.com/"提交" class="btn" /></li> </form> </ul> <div id="message_text"> <h2>显示留言</h2> <ul> <!-- <li> <h3>标题</h3> <p>文字</p> </li> --> </ul> </div></div></body></html>
模拟留言板
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。