案例四

[if !supportLists]一． [endif]将一个数组里的内容添加到表格

例：

 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

         删除

         innerHTML

-->

        

//获取input中的内容

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

            console.log(inputVal);

//获取button

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

            btn.onclick=function(){

//动态创建元素：

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

                div.className='main';

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

                img.src='img/1.jpg';

                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);

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

            }

                button.onclick=function(){

                    this.parentElement.removeChild('parentElement');

                }

[if !supportLists]二． [endif]计时器

例：

    

倒计时

距离下课还有:

    ||  

    

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='||';

      }

  }