[if !supportLists]一．?[endif]將一個(gè)數(shù)組里的內(nèi)容添加到表格
例：
?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);
//創(chuàng)建tbody
?????????????????var tbody=document.createElement('tbody');
?????????????????for(var i=0;i
//創(chuàng)建行
?????????????????????var tr=document.createElement('tr');
?????????????????????tbody.appendChild(tr);
//創(chuàng)建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);
二辫红，發(fā)表消息
例：
仿微博發(fā)表評(píng)論
*{
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;
????????????}
????????
????????
????????
你想對(duì)樓主說(shuō)點(diǎn)什么 你最多可輸入30個(gè)字符
????????
???????? 發(fā)表
???????? ?
????????
gkvhvfgjn
???????? 刪除
???????? innerHTML
-->
????????
//獲取input中的內(nèi)容
????????????var inputVal=document.querySelector('.content>input');
????????????console.log(inputVal);
//獲取button
????????????var btn=document.querySelector('.content>button');
????????????btn.onclick=function(){
//動(dòng)態(tài)創(chuàng)建元素：
????????????????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]計(jì)時(shí)器
例：
????
倒計(jì)時(shí)
距離下課還有:
????|| ?
????
function task(){
//獲取當(dāng)前時(shí)間碧浊、
????????var now=new Date();
//獲取下課時(shí)間:
????????var end=new Date('2018/5/25 20:30');
//求差 值為秒：
????????var s=(end-now)/1000;
????????console.log(s);
????????if(s>0){
//小時(shí)
????????????var h=Math.floor(s/3600);
//求分鐘：
????????????var m=Math.floor(s%3600/60);
//求秒數(shù)：
????????????s=Math.floor(s%60);
document.querySelector('span').innerHTML=h+'小時(shí)'+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='||';
??????}
??} ?????
