倒计时、动态表格、防微博

一、倒计时

   

倒计时

距离下课还有:

    || 

   

function task(){

//获取当前时间、

        var now=new Date();

//获取下课时间:

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

//求差 值为秒：

        var s=(end-now)/1000;

        console.log(s);

        if(s>0){

//小时

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

//求分钟：

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

//求秒数：

            s=Math.floor(s%60);

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

        }else{

            clearInterval(timer);

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

        }

}

        task();

var timer=setInterval(task,1000);   

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

  function stop(btn){

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

          clearInterval(timer);

          btn.innerHTML='|>';

      }else{

          timer=setInterval(task,1000);

          btn.innerHTML='||';

      }

  }   

二、动态创建表格

var json='[{"ename":"Tom", "salary":10000, "age":25},{"ename":"John", "salary":11000, "age":28},{"ename":"Mary", "salary":12000, "age":25}]';

                var emps=eval(json);

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

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

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

                for(var key in emps[0]){

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

                  th.innerHTML=key;

                  tr.appendChild(th);

                }

                thead.appendChild(tr);

                table.appendChild(thead);

//创建tbody

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

                for(var i=0;i

//创建行

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

                    tbody.appendChild(tr);

//创建td

                    for(var key in emps[i]){

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

                        td.innerHTML=emps[i][key];

                        tr.appendChild(td);

                    }

                }

                  table.appendChild(tbody);

                document.getElementById('data').appendChild(table);

三、仿微博发表评论

仿微博发表评论

       

*{

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;

            }

       

       

       

你想对楼主说点什么 你最多可输入30个字符

       

        发表

       

gkvhvfgjn

        删除

        -->

       

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

            console.log(inputVal);

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

            var reg=/^\s$/;

            btn.onclick=function(){

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

                }else{

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

                div.className='main';

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

                var num=Math.floor(Math.random()*(4-0+1));

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

                img.src=arr[num];

                div.appendChild(img);

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

                p.innerHTML=inputVal.value;

                div.appendChild(p);

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

button.innerHTML='删除';

                div.appendChild(button);

                button.onclick=function(){

//                    div.style.display='none';

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

                }

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

            }

        }