一、倒计时
倒计时
距离下课还有:
||
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;
}
你想对楼主说点什么 你最多可输入30个字符
发表
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);
}
}