效果:倒计时:
Body部分:
距离下课还有:
||
JS部分：
function timer(){
var now=new Date();
var time=new Date('2018/5/25 20:30')
var xk=(time-now)/1000;
if(xk>0){
var h=Math.floor(xk/3600);
var m=Math.floor(xk%3600/60);
var s=Math.floor(xk%60);
console.log(s);
document.querySelector('span').innerHTML=h+'小时'+m+'分钟'+s+'秒';
}else{
clearInterval(xh);
document.querySelector('span').innerHTML='下课了';
}
}
timer();
var xh=setInterval(timer,1000);
var btn=document.querySelector('button');
btn.onclick=function(){
if(btn.innerHTML=='||'){
clearInterval(xh);
btn.innerHTML='|>';
}else{
xh=setInterval(timer,1000);
btn.innerHTML='||';
}
}
效果：微博留言
Css部分：
*{
padding:0;
margin:0;
list-style: none;
}
.b{
margin:0 auto;
overflow: hidden;
width:700px;
margin-top:30px;
margin-bottom:10px;
}
.container{
margin:0 auto;
width:700px;
overflow: hidden;
}
.container div{
width:698px;
height:100px;
border:1px solid #999;
margin-bottom:33px;
}
.container div img{
float:left;
width:100px;
height:100px;
border-radius: 20px;
}
.main span{
float:left;
line-height:100px;
padding-left:20px;
}
.main .scly{
width:80px;
height:40px;
background: red;
float:right;
margin-right:10px;
.main{
border-radius: 20px;
}
.main input{
width:300px;
height:30px;
margin-top:100px;
margin-left:-128px;
}
.b span:nth-child(1){
font-size:25px;
font-weight:800;
}
.b span:nth-child(2){
font-size:15px;
float:right;
padding-top:10px;
color:red;
}
.input{
margin-top:20px;
}
.input input{
width:682px;
margin-left:6px;
height:200px;
border:1px solid #999;
border-radius: 10px;
padding-left:10px;
}
.tj{
width:80px;
height:40px;
background: red;
float:right;
margin-top:5px;
margin-right:10px;
}
Body部分：
你想对楼主说点什么
你最多可输入30个字
提交
JS部分
var btn=document.querySelector('.b>button');
var input=document.querySelector('.b>.input>input');
var reg=/^\s+$/;
btn.onclick=function(){
if(input.value=='' || reg.test(input.value)){
}else{
var div=document.createElement('div');
div.className='main';
document.querySelector('.container').appendChild(div);
arr=['./img/1.jpg','./img/2.jpg','./img/3.jpg','./img/4.jpg','./img/5.jpg','./img/6.jpg','./img/7.jpg','./img/8.jpg','./img/9.jpg','./img/10.jpg','./img/11.jpg','./img/12.jpg','./img/13.jpg','./img/14.jpg'];
var img=document.createElement('img');
img.src=num+'.jpg';
var num=Math.floor(Math.random()*(14));
img.src=arr[num];
div.appendChild(img);
var span=document.createElement('span');
div.appendChild(span);
span.innerHTML=input.value;
input.value='';
var buttons=document.createElement('button');
div.appendChild(buttons);
buttons.innerHTML='删除留言';
buttons.className='scly';
console.log(div);
创建一个评论他的评论的btn
var pbtn=document.createElement('button');
pbtn.innerHTML='评论他的留言';
pbtn.className='pbtn';
div.appendChild(pbtn);
pbtn.onclick=function(){
var pinp=document.createElement('input');
div.appendChild(pinp);
}
buttons.onclick=function(){
删除一个元素用removeChild
this.parentElement.parentElement.removeChild(this.parentElement);
}
}
}
网友评论