JavaScript19

1.仿微博发表评论

1)css样式

*{

    margin:0;

    padding:0;

}

a{

    text-decoration: none;

}

input{

    border:0;

}

li{

    list-style: none;

}

.container{

    width:800px;

    margin:0 auto;

    /*border:1px solid #000;*/

    padding:20px;

}

input{

    border:1px solid #666;

    width:100%;

    height:100px;

    padding-left:10px;

}

.content>p{

    font-weight: bold;

    font-size: 20px;

    padding:10px;

}

.content>p>span{

    font-weight: normal;

    font-size:14px;

    margin-left:400px;

}

.content>button{

    width:70px;

    height:40px;

    line-height: 40px;

    background: #e4393c;

    border-radius: 5px;

    border:0;

    font-size: 16px;

    font-weight: bold;

    color:#fff;

    margin-top:10px;

    margin-left:90%;

}

.main{

    width:100%;

    border:1px solid #000;

    overflow: hidden;

    border-radius: 20px;

    margin-top:20px;

    padding:0 10px;

}

.main>img,.main>p{

    float:left;

}

.main>img{

    width:100px;

    height:100px;

}

.main>p{

    width:500px;

    height:100px;

    line-height: 100px;

    padding-left:50px;

    /*border:1px solid #000;*/

}

.main>button{

    width:70px;

    height:40px;

    line-height: 40px;

    background: #e4393c;

    border-radius: 5px;

    border:0;

    font-size: 16px;

    font-weight: bold;

    color:#fff;

    float:right;

    margin-top:30px;

}

2)div

<div class='container'>

    <div class='content'>

        <p>你想对楼主说点什么 <span>你最多可输入30个字符</span></p>

        <input type="text" name="" placeholder="请输入你想要说的内容">

        <button>发表</button>

    </div>

</div>

3)script

把图片做成随机数

var btn=document.querySelector('.content>button');

btn.onclick=function(){

    var inputVal=document.querySelector('.content>input').value;

    //动态创建元素：

    //动态创建div

        var div=document.createElement('div');

        div.className='main';

        var img=document.createElement('img');

        var arr=['img/1.jpg','img/2.jpg','img/3.jpg'];

        var num=Math.floor(Math.random()*3);

        img.src=arr[num];

        div.appendChild(img);

        var p=document.createElement('p');

        p.innerHTML=inputVal;

        document.querySelector('.content>input').value='';

        div.appendChild(p);

        var button=document.createElement('button');

        button.innerHTML='删除';

        button.onclick=function remov(){

            this.parentElement.parentElement.removeChild(this.parentElement);

        }

        div.appendChild(button);

        document.querySelector('.container').appendChild(div);   

}

2.仿新浪微博发布评论js代码

1)css样式

.main{

    width: 800px;

    margin:20px auto;

}

span{

    display: inline-block;

    width: 200px;

    height: 25px;

    line-height: 25px;

    vertical-align: middle;

    text-align: left;

    margin-bottom: 10px;

}

.tag{

    font-size: 13px;

    margin-left: 370px;

    vertical-align: bottom;

    text-align: center;

    margin-bottom: 0;

}

.text{

    width: 750px;

    height: 180px;

    margin:0 auto;

    resize:none;

}

input{

    display: inline-block;

    width: 80px;

    height: 50px;

    background: #E2526F;

    border: 0;

    margin-left: 670px;

    margin-top: 10px;

}

.creatediv{

    width: 675px;

    height: 80px;

    border: 1px solid gray;

    position: relative;

    margin-top: 10px;

    padding-left: 75px;

}

.createinput{

    width: 80px;

    height: 30px;

    position:absolute;

    right: 5px;

    bottom:5px;

}

.createimg{

    width: 50px;

    height: 50px;

    position: absolute;

    top: 15px;

    left: 15px;

}

.createdivs{

    width:600px;

    height:50px;

    position: absolute;

    top: 15px;

    left: 85px;

}

2)div

<div class="main">

    <span>你想对楼主说点什么</span>

    <span class="tag">你最多可以输入30个字符</span>

    <textarea id="text" cols="30" rows="10" maxlength="30" class="text" spellcheck="false"></textarea><br>

    <input type="button" value="发 表" id="ipt">

    <div id="txt" ></div>

</div>

3)script

var textarea=document.getElementById("text");

var ipt=document.getElementById("ipt");

var txt=document.getElementById("txt");

ipt.onclick=function(){

    var txtValue=textarea.value;

    if(txtValue.length>0){

        var divs=document.createElement("div");

        var imgs=document.createElement("img");

        var ps=document.createElement("p");

        var inputs=document.createElement("input");

        divs.setAttribute("class","creatediv");

        imgs.setAttribute("class","createimg");

        ps.setAttribute("class","createdivs");

        inputs.setAttribute("class","createinput");

        img.src="pic/1.jpg";

        input.type="button";

        inputs.value="删除";

        ps.innerHTML=txtValue;

        divs.appendChild(imgs);

        divs.appendChild(ps);

        divs.appendChild(inputs);

        if(txt.children.length==0){

            txt.appendChild(divs);

        }else{

            txt.insertBefore(divs,get_firstChild(txt));

        }

        inputs.onclick=function(){

            this.parentElement.parentElement.removeChild(this.parentElement)

        }

    }

}

var textarea=document.getElementById("text");

    var inputs=document.getElementById("ipt");

    var txt=document.getElementById("txt");

    ipt.onclick=function(){

        var txtValue=textarea.value;

        if(txtValue.length>0){

            var divs=document.createElement("div");

            var imgs=document.createElement("img");

            var ps=document.createElement("p");

            var inputs=document.createElement("input");

            divs.setAttribute("class","creatediv");

            imgs.setAttribute("class","createimg");

            ps.setAttribute("class","createdivs");

            inputs.setAttribute("class","createinput");

            imgs.src="pic/1.jpg";

            inputs.type="butto";

            inputs.value="删除";

            ps.innerHTML=txtValue;

            divs.appendChild(imgs);

            divs.appendChild(ps);

            divs.appendChild(inputs);

            if(txt.children.length==0){

                txt.appendChild(divs)

            }else{

                txt.appendChild(divs,get_firstChild(txt));

            }

            inputs.onclick=function(){

                this.parentElement

                        .parentElement

                        .removeChild(this.parentElement)

            }

        }

    }