JavaScript12倒计时、动态表格、微博
一、倒计时
倒计时
距离下课还有:
||
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;
}
作者：梁萌0328
链接：https://www.jianshu.com/p/bc8821698404
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
