留言板

作者: 北觅_Sir | 来源:发表于2018-09-14 08:51 被阅读0次
    仿微博留言板
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                margin:0;
                padding:0;
                box-sizing: border-box;
            }
            a{
                text-decoration: none;
            }
            li{
                list-style: none;
            }
            
            .container{
                width:800px;
                margin:50px auto;
                border:1px solid #000;
            }
            button{
                border:none;
            }
            input{
                width:800px;
                height:100px;
                margin:20px 0;
            }
            .btn{
                text-align: right;
            }
            .btn>button{
                width:80px;
                height:40px;
                line-height:40px;
                background: #f00;
                color:#fff;
                border-radius: 5px;
                font-size: 16px;
            }
            .main>li{
                border:1px solid #000;
                overflow: hidden;
                height:100px;
                line-height: 100px;
            }
            .main>li>img{
                float:left;
                margin-top:25px;
                width:50px;
            }
            .main>li>p{
                float: left;
                width:500px;
                text-align: center;
            }
            .main>li>button{
                float:right;
                 width:80px;
                height:40px;
                line-height:40px;
                background: #f00;
                color:#fff;
                border-radius: 5px;
                font-size: 16px;
                margin-top:30px;
            }
        </style>
    </head>
    <body>
        <div class='container'>
           <div class='box'>
            <h2>你想对博主说点什么</h2>
            <input type="text" placeholder="请输入你想说的内容">
            <p class='btn'><button>发表</button></p>
          </div> 
          
          <ul class='main'>
    <!--
              <li>
                  <img src="img/1.gif" alt="">
                  <p>分单号和规范化股份</p>
                  <button>删除</button>
              </li>
    -->
          </ul>    
                
        </div>
        <script>
        //1.点击按钮发表评论
        var btn=document.querySelector('.btn>button');
        btn.onclick=function(){
            //获取input的value值
            var val=document.querySelector('input').value;
            //创建元素
              //li
            var li=document.createElement('li');
            //创建img
            var arr=['img/1.png','img/2.png','img/3.png'];
            //随机数:
            //Math.floor(Math.random()*(max-min+1)+min);
            var num=Math.floor(Math.random()*(2-0+1)+0);
            var  img=document.createElement('img');
            img.src=arr[num];
            //追加img
            li.appendChild(img);
            //创建p标签
            var p=document.createElement('p');
            //给P标签添加内容
            p.innerHTML=val;
            //追加p
            li.appendChild(p);
            //创建button
            var button=document.createElement('button');
            button.innerHTML='删除';
            //追加button
            li.appendChild(button);
            //点击button删除
            button.onclick=function(){
                this.parentElement.parentElement.removeChild(this.parentElement);
            }
            
            
            //追加li
            document.querySelector('.main').appendChild(li);
            
        }    
        
            
            
            
            
        </script>
    </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:留言板

          本文链接:https://www.haomeiwen.com/subject/kyotgftx.html