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