模拟留言本代码,Js代码库,德仔网

代码语言
代码分类
【Js】模拟留言本
作者:筱枚 / 发布于2016/3/15/ 736
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>模拟留言板</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 type="text/javascript">
window.onload=function (){
    var oTxt1=document.getElementById('txt1');
    var oTxt2=document.getElementById('txt2');
    var oBtn=document.getElementById('btn1');
    var oUl=document.getElementById('ul1');
    var oMsgTxt=document.getElementById('message_text');
     
    oBtn.onclick=function (){
        var oLi=document.createElement('li');
        oLi.innerHTML='<h3>'+oTxt1.value+'</h3>'+oTxt2.value+'';
        oTxt1.value=oTxt2.value='';
        oMsgTxt.style.display='block';
        oUl.appendChild(oLi);
    };
};
</script>
</head>
 
<body>
<div id="box">
    <ul id="fill_in">
        <form>
            <li>姓名：<input id="txt1" type="text" class="text" /></li>
            <li>内容：<textarea id="txt2"></textarea></li>
            <li><input id="btn1" type="button" value="提交" class="btn" /></li>
        </form>
    </ul>
    <div id="message_text">
        <h2>显示留言</h2>
        <ul id="ul1"></ul>
    </div>
</div>
</body>
</html>
试试其它关键字
　留言本　
同语言下
可能有用的
筱枚贡献的其它代码(13)