javascript-简易留言板制作

Posted 2020-08-07 只要闪电降临就会有跳舞的火焰

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript-简易留言板制作相关的知识，希望对你有一定的参考价值。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js练习</title>
    <style type="text/css">
    #ull{
        padding:0px;
        margin: 0px;
    }
    #ull li{
        list-style:none;
        background-color: #ccc;
        width:auto;
        border:1px solid #999;
        position:relative;
     }
    #ull li h2{
        display:inline-block;
     }
      #ull li p{
        display:inline-block;
     }
     #ull li a{
         position:absolute;
         text-decoration: none;
         color:red;
         right:5px;
         bottom:5px;
     }
     #content{
         width:300px;
         height:100px;
     }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var oname = document.getElementById(‘name‘); 
        var ocontent = document.getElementById(‘content‘); 
        var oul = document.getElementById(‘ull‘); 
        var obtn = document.getElementById(‘btn‘); 
        var lli = oul.getElementsByTagName(‘li‘);
        obtn.onclick = function(){
        oli = document.createElement(‘li‘);
        oh2 = document.createElement(‘h2‘);
        op  = document.createElement(‘p‘);
        oa  = document.createElement(‘a‘);
         oa.innerHTML="删除";
        oa.href = "javascript:;";
        oa.onclick = function(){
        oul.removeChild(this.parentNode);
    }

        oh2.innerHTML = oname.value + ‘：‘;
        op.innerHTML = ocontent.value;

        oli.appendChild(oh2);
        oli.appendChild(op);
        oli.appendChild(oa);
        if(lli.length > 0){
        oul.insertBefore(oli,lli[0]);
    }
    else{
        oul.appendChild(oli);
    }
    }


         
    }
    </script>
</head>
<body>
姓名：<input type="text" id="name"><br>
留言：<textarea cols="20" rows="3" wrap = "hard" id="content"></textarea><br>
<button id="btn">添加</button>
<ul id="ull">
</ul>
</body>
</html>

这是一个利用DOM制作的一个简易留言板

以上是关于javascript-简易留言板制作的主要内容，如果未能解决你的问题，请参考以下文章

用javascript实现简易留言板

vue.js介绍，常用指令，事件，以及制作简易留言版

微信小程序实现简易留言板

jsp做的一个简易留言板功能

原生Js_制作简易日历