前端特效（4）--秒杀倒计时

最新推荐文章于 2023-11-04 14:35:06 发布

月亮很亮(ง •̀_•́)ง

最新推荐文章于 2023-11-04 14:35:06 发布

阅读量815

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/qq_43722072/article/details/104410624

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

制作秒杀倒计时效果：在文本框中输入倒计时的秒数（以秒为单位），点击开始倒计时，下面的图片就会进行相应的切换。
首先，我们先要分析一下用到的知识点：

img标签中的图片初始化为数字“0”的图片
使用了setInterval以及关闭计时器clearInterval
难点在于，如何将文本框中内容转化为时间，并在倒计时图片中对应展示
学会自己封装函数（在这个效果中，封装了一个fTime（）函数将时间转化为要求的数字格式）

代码思路：

<body>
    <input type="text"/>
    <button>开始倒计时</button>
    <div>
        <img src="img/0.JPG" alt="">
        <img src="img/0.JPG" alt="">
        <img src="img/0.JPG" alt="">
        <img src="img/0.JPG" alt="">
        <img src="img/0.JPG" alt="">
        <img src="img/0.JPG" alt="">
        <img src="img/0.JPG" alt="">
        <img src="img/0.JPG" alt="">
        <!-- colon -->
    </div>
    <script src="myjs.js"></script>
    <script>
    var oTe = document.getElementsByTagName("input")[0];
    var oBtn = document.getElementsByTagName("button")[0];
    var aImg = document.getElementsByTagName("img");
    var timer = 0;
    var sS = ""
    oBtn.onclick = function (){
        clearInterval(timer);
        sS = oTe.value;
        clock();
        timer = setInterval(clock,1000);
    }
    function clock(){
        var sTime = fTime(sS--*1000);
        for(var i=0;i<sTime.length;i++){
            aImg[i].src = sTime[i]==":" ? "img/colon.JPG" : "img/"+sTime[i]+".JPG";
        }
        sS < 0 && clearInterval(timer);
    }
    </script>
</body>

效果展示：输入70
在这里插入图片描述
点击开始倒计时：（图片就会进行相应的切换）

月亮很亮(ง •̀_•́)ง

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端特效（4）--秒杀倒计时

制作秒杀倒计时效果：在文本框中输入倒计时的秒数（以秒为单位），点击开始倒计时，下面的图片就会进行相应的切换。首先，我们先要分析一下用到的知识点：img标签中的图片初始化为数字“0”的图片使用了setInterval以及关闭计时器clearInterval难点在于，如何将文本框中内容转化为时间，并在倒计时图片中对应展示学会自己封装函数（在这个效果中，封装了一个fTime（）函数将时间转化...
复制链接

扫一扫