js制作的倒计时特效

“倒计时”这一短语来源于1927年德国的幻想故事片《月球少女》，在这部影片中，导演弗里兹为了增加艺术效果，扣人心弦，在火箭发射的镜头里设计了“9、8、7、……3、2、1”点火的发射程序。这个程序得到火箭专家们的一致赞许，认为它十分准确清楚科学地突出火箭发射的时间越来越少，使人们产生火箭发射前的紧迫感。此后“倒计时”被普遍采用，而且超越了使用范围，成为一个适用性极强，适用范围极广的词语。

10，9，8，7，6，5，4，3，2，1发射，倒计时是常用需求，收集一些倒计时特效供大家参考。

1.第一种数字摇摆出现的效果：

在线预览地址：js数字倒计时特效

第二种：

倒计时数字像沙子一样散去的效果：

在线浏览地址 js制作的数字倒计时特效，数字像沙子一样散去

第三种，这一种我也没看懂，到底怎么回事，但是竟然是3D的，你们知道的研究下吧

在线预览地址：js生成的倒计时树模型

代码赏析：

const nums = document.querySelectorAll('.nums span')
const counter = document.querySelector('.counter')
const final = document.querySelector('.final')
const replay = document.querySelector('#replay')runAnimation()
function runAnimation(){nums.forEach((num, i) =>{const nextToLast = nums.length - 1num.addEventListener('animationend', (e) =>{if(e.animationName === 'goIn' && i !== nextToLast){num.classList.remove('in')num.classList.add('out')}else if(e.animationName === 'goOut' && num.nextElementSibling){num.nextElementSibling.classList.add('in')}else{counter.classList.add('hide')final.classList.add('show')}})})
}function resetAnimation(){counter.classList.remove('hide')final.classList.remove('show')nums.forEach((num) =>{num.classList.value = ''})nums[0].classList.add('in')
}replay.addEventListener('click', () =>{resetAnimation()runAnimation()
})

js制作的倒计时特效相关推荐

基于 js 制作一个倒计时
目录前言: 项目效果展示: 代码实现思路: 使用方法: 重点功能讲解: 实现代码: 总结: 前言: 很多网站在做活动时,会出现一个截止时间倒计时的提示,跟随此文做一个倒计时吧! 项目效果展示: 代码 ...
html+css+js制作结婚倒计时网页模板(520/七夕情人节/程序员告白)
❉ html+css+javascript制作结婚倒计时网页模板(520/七夕情人节/程序员告白) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, 引用了C ...
JS制作支付倒计时页面
(图一) (图二) (图三) (图四) 实现目标一,页面在图一时开始进行倒计时(可以点击取消订单按钮,支付页面消失). 二,倒计时完毕,出现删除订单. 三,单击删除订单,弹出弹框,询问是否要真正删除 ...
使用css + 部分js制作按钮流光特效
制作一个按钮流光特效,其核心就在于规律的动画的执行, 让我们先看看效果吧鼠标移入会出现颜色循环流动效果. html部分(就是一个简单的a标签) <a href="#"> ...
js制作秒杀倒计时效果：
需求:将期望时间和现在的时间差显示在页面上,并让这个时间递减,形成倒计时的样子实际运用场景:这个倒计时时间可能是距离秒杀结束时间or距离生日倒计时时间图示: 思路: 定义两个时间对象,一个返回当前 ...
html+css+js制作时间倒计时（时分秒）简易版
效果图展示: 1.先了解获取时间的函数 Date():获取当前系统时间 //获取当前系统时间 var date = new Date(); 2.获取时间的方法 getHours():获取小时值 get ...
js -制作红绿灯倒计时
1.html内容: <body><div class="box"><div id="red"&g ...
HTML+CSS+JS实现 ❤️ 粒子倒计时特效❤️
剪映321倒计时特效怎么弄？
剪映中的321倒计时特效风靡一时,不少用户都来问小编怎么制作321倒计时特效,那么下面就来看看详细的制作教程吧. 剪映321倒计时特效怎么弄? 1.首先点击"开始制作"来制作短视频 ...

js制作的倒计时特效

js制作的倒计时特效相关推荐

最新文章

热门文章