模拟留言板

最新推荐文章于 2023-11-27 16:48:00 发布

weixin_30399871

最新推荐文章于 2023-11-27 16:48:00 发布

阅读量174

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/heboliufengjie/p/4163835.html

版权

<!--
智能社© - 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 == "" || oTextarea.value == "" )
        {
            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="提交" class="btn" /></li>
        </form>
    </ul>
    <div id="message_text">
        <h2>显示留言</h2>
        <ul>
            <!--
            <li>
                <h3>标题</h3>
                <p>文字</p>
            </li>
            -->
        </ul>
    </div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/heboliufengjie/p/4163835.html

weixin_30399871

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模拟留言板

<!doctype html><html><head><meta charset="utf-8"...
复制链接

扫一扫