js电影倒计时_var time=document.queryselector(’.time‘);什么意思-CSDN博客

本文链接：https://blog.csdn.net/weixin_53213705/article/details/124636713

本文介绍了如何使用CSS的clip-path属性和JavaScript的setInterval方法，结合@keyframes动画，创建一个简洁而有趣的数字计时器效果。通过调整clip-path的多边形坐标，实现了数字从9倒计时到1再回到9的平滑过渡。这个技巧对于前端开发者来说是一个很好的实践案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

除了动画别的样式特别简单，动画主要是用到了clip-path

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

屏幕中间的数字通道了计时器setInterval 和 innerHTML

setInterval() 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。

js代码也狠简单

        var num = 9;

        var time = document.querySelector('.time')

        setInterval(function () {

            time.innerHTML = num;

            num == 1 ? num = 9 : num--

        }, 1000)

最最重要的动画来了

@keyframes go {
            0% {clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); }
            12.5% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);}
            25% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%);}
            37.5% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);}
            50% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 100%, 50% 100%);}
            67.5% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%, 0 100%);  }
            75% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%, 0 50%);}
            87.5% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 0% 0%);}
            100% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%);}
        }

看到是不是觉得很蒙，我们要想到9次每次的样子以及他的几个角，而且必须记住最多角那一次，每一次都得变都考虑到每个角走到了哪，不然有的时候动画就没有动，会有闪跳一下的效果，就类似于动画（元素有绝对定位）0% {left:100px} 100%{right:100px} 这样是没有动画的

喜欢研究的小伙伴可以好好看看！