第js實(shí)現(xiàn)酷炫倒計(jì)時(shí)動(dòng)畫本文實(shí)例為大家分享了js實(shí)現(xiàn)酷炫倒計(jì)時(shí)動(dòng)畫的具體代碼，供大家參考，具體內(nèi)容如下

前段時(shí)間和朋友去音樂(lè)餐廳吃飯，中間有個(gè)活動(dòng)，然后看到他們軟件公眾號(hào)H5有個(gè)活動(dòng)開始的倒計(jì)時(shí)的動(dòng)畫效果，于是想了下實(shí)現(xiàn)思路。

!DOCTYPEhtml

html

head

metacharset="utf-8"/

titlejs實(shí)現(xiàn)酷炫倒計(jì)時(shí)動(dòng)畫效果/title

style

*{margin:0;padding:0;}

body{width:100%;height:100%;overflow:hidden;}

.box{width:1000px;height:700px;margin:100pxauto;}

.btn{width:100px;height:100px;margin:50pxauto0;font-size:16px;color:#fff;text-align:center;line-height:100px;border-radius:100px;background:#3385ff;}

.btn:hover{box-shadow:0010px#77aeff;cursor:pointer;}

h1{font-size:300px;color:red;text-align:center;}

h1.active{animation:count.5s;}

@keyframescount{

from{

transform:scale(.1);

opacity:1;

}

to{

transform:scale(3.5);

opacity:0;

display:none;

}

}

/style

/head

body

div倒計(jì)時(shí)/div

div

h110/h1

/div

/body

script

letNUMBER=1;

letCOUNT=10;

letCOLORS=['#8c00ff','#006bff','#4fff00','#ffb800','#ff0000'];

lettimer=null;

function$(str){

returndocument.querySelector(str);

functionactionNum(){

leth1=$('h1');

$('h1').style.display='block';

timer=setInterval(()={

COUNT--;

NUMBER++;

if(COUNT=0){

h1.classList.remove('active');

setTimeout(()={

letnum=Math.floor(Math.random()*5);

h1.innerText=COUNT;

h1.style.color=COLORS[num];

h1.classList.add('active');

},100);

}else{

clearInterval(timer);

}

},1000);

$('.btn').onclick=function(){

if(COUNT0){

COUN