一嚎研、倒計(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='||';
? ? ? }
? }? ?
二、動(dòng)態(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ā)表評(píng)論
仿微博發(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
? ? ? ? 刪除
? ? ? ? -->
? ? ? ?
? ? ? ? ? ? var inputVal=document.querySelector('.content>input');
? ? ? ? ? ? console.log(inputVal);
? ? ? ? ? ? var btn=document.querySelector('.content>button');
? ? ? ? ? ? var reg=/^\s$/;
? ? ? ? ? ? btn.onclick=function(){
? ? ? ? ? ? ? ? if(inputVal.value==''||reg.test(inputVal.value)){
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? var div=document.createElement('div');
? ? ? ? ? ? ? ? div.className='main';
? ? ? ? ? ? ? ? var arr=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'];
? ? ? ? ? ? ? ? var num=Math.floor(Math.random()*(4-0+1));
? ? ? ? ? ? ? ? var img=document.createElement('img');
? ? ? ? ? ? ? ? img.src=arr[num];
? ? ? ? ? ? ? ? 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);
? ? ? ? ? ? ? ? button.onclick=function(){
//? ? ? ? ? ? ? ? ? ? div.style.display='none';
? ? ? ? ? ? ? ? ? ? this.parentElement.parentElement.removeChild(this.parentElement);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? document.querySelector('.container').appendChild(div);
? ? ? ? ? ? }
? ? ? ? }
