js案例：倒计时，仿微博评论

效果:倒计时:

Body部分:

距离下课还有:

  ||

JS部分：

        function timer(){

        var now=new Date();

        var time=new Date('2018/5/25 20:30')

        var xk=(time-now)/1000;

        if(xk>0){

            var h=Math.floor(xk/3600);

            var m=Math.floor(xk%3600/60);

            var s=Math.floor(xk%60);

            console.log(s);

document.querySelector('span').innerHTML=h+'小时'+m+'分钟'+s+'秒';

        }else{

            clearInterval(xh);

document.querySelector('span').innerHTML='下课了';

        }

    }

        timer();

      var xh=setInterval(timer,1000);

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

        btn.onclick=function(){

            if(btn.innerHTML=='||'){

                clearInterval(xh);

                btn.innerHTML='|>';

            }else{

                xh=setInterval(timer,1000);

                btn.innerHTML='||';

            }

        }

效果：微博留言

Css部分：

        *{

            padding:0;

            margin:0;

            list-style: none;

        }

        .b{

            margin:0 auto;

            overflow: hidden;

            width:700px;

            margin-top:30px;

            margin-bottom:10px;

        }

        .container{

            margin:0 auto;

            width:700px;

            overflow: hidden;

        }

        .container div{

            width:698px;

            height:100px;

            border:1px solid #999;

            margin-bottom:33px;

        }

        .container div img{

            float:left;

            width:100px;

            height:100px;

            border-radius: 20px;

        }

        .main span{

            float:left;

            line-height:100px;

            padding-left:20px;

        }

        .main .scly{

            width:80px;

            height:40px;

            background: red;

            float:right;

            margin-right:10px;

        .main{

            border-radius: 20px;

        }

        .main input{

            width:300px;

            height:30px;

            margin-top:100px;

            margin-left:-128px;

        }

        .b span:nth-child(1){

            font-size:25px;

            font-weight:800;

        }

        .b span:nth-child(2){

            font-size:15px;

            float:right;

            padding-top:10px;

            color:red;

        }

        .input{

            margin-top:20px;

        }

        .input input{

            width:682px;

            margin-left:6px;

            height:200px;

            border:1px solid #999;

            border-radius: 10px;

            padding-left:10px;

        }

        .tj{

            width:80px;

            height:40px;

            background: red;

            float:right;

            margin-top:5px;

            margin-right:10px;

        }

Body部分：

   

你想对楼主说点什么

你最多可输入30个字

       

提交

JS部分

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

        var input=document.querySelector('.b>.input>input');

        var reg=/^\s+$/;

        btn.onclick=function(){

            if(input.value=='' || reg.test(input.value)){

            }else{

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

            div.className='main';

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

arr=['./img/1.jpg','./img/2.jpg','./img/3.jpg','./img/4.jpg','./img/5.jpg','./img/6.jpg','./img/7.jpg','./img/8.jpg','./img/9.jpg','./img/10.jpg','./img/11.jpg','./img/12.jpg','./img/13.jpg','./img/14.jpg'];

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

          img.src=num+'.jpg';

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

            img.src=arr[num];

            div.appendChild(img);

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

            div.appendChild(span);

span.innerHTML=input.value;

            input.value='';

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

            div.appendChild(buttons);

buttons.innerHTML='删除留言';

            buttons.className='scly';

            console.log(div);

创建一个评论他的评论的btn

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

pbtn.innerHTML='评论他的留言';

                pbtn.className='pbtn';

                div.appendChild(pbtn);

                pbtn.onclick=function(){

                    var pinp=document.createElement('input');

                    div.appendChild(pinp);

                }

            buttons.onclick=function(){

删除一个元素用removeChild

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

            }

        }

    }