效果:倒計時:
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);
創(chuàng)建一個評論他的評論的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);
? ? ? ? ? ? }
? ? ? ? }
? ? }
