您正在使用IPV4(3.238.252.196)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】多款云产品1折起,买云服务器送免费机器,最长免费续3个月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 中秋节 30
2022年 国庆节 51
2023年 元 旦 143
2023年 春 节 164
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
js实现酷炫倒计时动画
内容摘要: !DOCTYPEhtmlhtmlheadmetacharset='utf-8'/titlejs实现酷炫倒计时动画效果/titlestyle*{margin:0;padding:0;}body{width:100%;height:100%;overflow:hidden;}.box{width:1000px;height:700px;margin:100pxa......
<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8"/>

<title>js实现酷炫倒计时动画效果</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>

<divclass="btn">倒计时</div>

<divclass="box">

<h1style="display:none;">10</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(COUNT<0){

COUNT=11;

}

actionNum();

};

</script>

</html>

上一篇:使用JS实现简单的图片切换功能 下一篇:js实现列表自动滚动循环播放
发布日期:2022/7/13
手机扫二维码直达本页
发布时间:14:30:47
点击:40
录入:壹家怡园
相关文章
Baidu

YiJiaCMS 6.3.1.220701(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022