留言板

作者: 北觅_Sir | 来源:发表于2018-09-14 08:51 被阅读0次

留言板
2018-11-12
实例：PHP+MySQL开发留言板
留言板
《留言板》
留言板
留言板
留言板
留言板
留言板

仿微博留言板


<!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>