一、倒計時
倒計時
距離下課還有:
????|| ?
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);
//求秒數(shù)：
????????????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='||';
??????}
??} ???
二、動態(tài)創(chuàng)建表格
?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ā)表評論
*{
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
鏈接：http://www.itdecent.cn/p/bc8821698404
來源：簡書
著作權歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權，非商業(yè)轉(zhuǎn)載請注明出處。
