美文网首页
简易倒计时

简易倒计时

作者: 记忆是条狗 | 来源:发表于2017-10-18 16:43 被阅读0次
function countdown() {
        var oCountdown = $('.countdown');
        var sTime = oCountdown.attr('data-time');
        if (!sTime) return;
        var endTime = new Date(sTime);
        var nowTime = new Date();
        var disTimer = endTime - nowTime;
        if (disTimer <= 0) return;
        oCountdown.show();
        var ctTimer = null;
        var speed = 1000;
        var aItem = oCountdown.find('.time-item');

        ctTimer = setInterval(function() {
            disTimer -= speed;
            if (disTimer <= 0) {
                clearInterval(ctTimer);
            } else {
                var data = formatTimer(disTimer);
                aItem.eq(0).html(data.h);
                aItem.eq(1).html(data.m);
                aItem.eq(2).html(data.s);
            }

        }, speed);
    }

    function formatTimer(timer) {
        var hours = parseInt((timer % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = parseInt((timer % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = parseInt((timer % (1000 * 60)) / 1000);
        return {
            h: hours > 10 ? hours : '0' + hours,
            m: minutes > 10 ? minutes : '0' + minutes,
            s: seconds > 10 ? seconds : '0' + seconds
        };
    }

相关文章

  • vue倒计时组件

    模仿vantUI的倒计时组件,自己写了个简易的 使用方法:

  • 简易倒计时

  • Chronometer

    简介 官方提供的简易版时间显示控件Google传送门 计时功能 开始计时 停止计时 重置时间 倒计时(暂不建议使用...

  • 简易LED倒计时动画制作

    上图这是本期我们要实现的是动画效果,公众号回复"LED"获取动画素材。 1.应用场景: 2.制作思路: A.准备倒...

  • 适合减脂的简易料理—老豆腐炖鸡腿+瘦肉

    距自考倒计时26天。 前言: 今天想分享一道简易料理做法,食材简单、制作简单、好吃,适合减脂人员。它就是老豆腐炖鸡...

  • iOS图片选择器

    简易图片选择 HBPhotoPicker 简易图片选择 HBPhotoPicker 简易图片选择 HBPho...

  • 做一个JS简易倒时器

    最近做项目需要用到一个倒时器的功能,于是用JS做了一个简易的倒计时原理。 解读原理后,就可以以不变应万变了!!

  • 与“尼”有关的故事

    回国倒计时10天 朋友发消息提醒我让我记得给她留衣柜。这是一个简易衣柜,是我在尼泊尔买的第二个衣柜。上次去朋友那,...

  • 简单随笔

    简单 简单简易易简单, 单简易简单易简。 简简单单易简简, 单单简简易单单。

  • JavaScript-简易日历

    简易日历 HTML部分 简易日历 1 JAN 2 ...

网友评论

      本文标题:简易倒计时

      本文链接:https://www.haomeiwen.com/subject/agjeuxtx.html