`
ghyghoo8
  • 浏览: 192787 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

一个页面的倒计时代码

阅读更多
今天切割一页面,类似于团购网站的商品展示,N个竞拍商品,每个都得有单独的倒计时截止时间,期间杂七杂八的事一大堆。幸亏哥定力好,酝酿到大家都下班,办公室安静了,才着手写页面的js:倒计时。网上也有类似功能的代码,但都不怎么好用,干脆自己写吧。
分析了一下基本功能:时分秒,三级定时联动,倒计时开关,初始化变量等等...

差不多就是这个思路,最后,处理了一些小细节。可能还有bug,等待被发现

$(function(){
//====倒计时====
        var timePush = {},timeId,STATIC = {'0':'h','1':'m','2':'s'},items = $(".items-prod li");
        $(".time-left", items).each(function(index, callback) {
            timePush["T" + index] = returnTime.call(this);
        });

        timeId = setTimeout(function() {
            if (isEmptyObj.call(timePush)) {
                clearTimeout(timeId);
                return false;
            }
            //提前预定 处理
            timeId = setTimeout(arguments.callee, 1000);
            //处理
            $.each(timePush, function(index, callback) {
                //递归获取更新后的时间
                var timeItem = getTime(this, 2);
                if (timeItem.join("") - 0 == 0) {
                    deleteTime(index);
                } else {
                    updateTime(index, timeItem);
                }
            });
        }, 1);

        function getTime(arr, type, pre) {
            if (type < 0)return 0;
            var num = _numTmp = ~~arr[type],_type = STATIC["" + type];
            switch (_type) {
                case 'h':
                    --num < 0 ? pre = 0 : num;
                    break;
                case 'm':
                    num = fixed2Str(--num < 0 ? getTime(arr, type - 1, 59) : num);
                    pre = ~~arr[type - 1] || _numTmp ? pre : 0;
                    arr[type] = num;
                    break;
                case 's':
                    arr[type] = fixed2Str(--num < 0 ? getTime(arr, type - 1, 59) : num);
                    break;
                default:
                    break;
            }
            if (pre != void 0)return pre;
            return arr;
        }

        function updateTime(key, arr) {
            var index = key.replace(/[^\d]/g, ''),str = arr.join("").split("");
            $(".time-left", items.eq(index)).find("span i").each(function(index) {
                this.innerHTML = str[index];
            })
        }

        function deleteTime(key) {
            var index = key.replace(/[^\d]/g, '');
            delete timePush[key];
            $(".reply-btn", items.eq(index)).attr("class", "submit-btn disabled-big").html('<span><em></em>已经结束</span>');
            $(".time-left", items.eq(index)).find("span i").html(0);
        }

        function isEmptyObj() {
            for (var i in this)return false;
            return true;
        }

        function fixed2Str(number) {
            if (number < 10)number = "0" + number;
            return "" + number;
        }

        function returnTime() {
            var time = [];
            $("span", this).each(function() {
                time.push($(this).text());
            });
            return time;
        }
});


HTML
<div class="time-leave">
                    <span class="fl">剩余时间:</span>

                    <div class="time-left fl"><p>
                        <span><i>0</i><i>0</i></span><span><i>3</i><i>6</i></span><span><i>3</i><i>9</i></span></p>
                    </div>
                </div>

分享到:
评论

相关推荐

    JS一个页面多个倒计时

    在JavaScript(JS)中,实现一个页面多个倒计时功能是一项常见的需求,特别是在电商网站上,如淘宝和京东,用于显示商品秒杀活动的倒计时。这种功能能够吸引用户注意力,增加活动的紧迫感,从而提高转化率。本文将...

    2023年新年倒计时HTML源代码,2023年春节倒计时代码

    在倒计时代码中,CSS通常用来设置倒计时数字的样式,比如字体大小、颜色、背景、边框等,以确保倒计时醒目且符合节日主题。 `NewYear.js`是JavaScript文件,JavaScript是一种脚本语言,常用于网页交互和动态效果。...

    jQuery创意精美的网页倒计时代码

    jQuery作为一款广泛使用的JavaScript库,提供了丰富的功能和简单易用的API,使得创建创意精美的网页倒计时代码变得轻而易举。本项目就是基于jQuery实现的一个时分秒倒计时计时器,用户可以自定义倒计时时间,增加了...

    javascript 实现网页 倒计时 代码

    在JavaScript中实现网页倒计时是一项常见的任务,尤其在创建活动页面、竞赛倒计时或者定时发布内容等场景中非常实用。本篇文章将详细介绍如何利用JavaScript编写一个网页倒计时功能,并结合提供的`index.html`和`js`...

    同一页面可以批量调用的倒计时代码

    类似于团购网站的倒计时代码,同一页面可批量调用多个。实时倒计时,兼容各大主流浏览器!

    元旦倒计时代码代码基于javascript实现

    这是一段元旦倒计时倒计时代码,web页面,浏览器直接打卡既可以访问。这是一段元旦倒计时倒计时代码,web页面,浏览器直接打卡既可以访问。这是一段元旦倒计时倒计时代码,web页面,浏览器直接打卡既可以访问。这是...

    vue倒计时刷新页面不会从头开始的解决方法

    为了演示这个过程,文章中还提供了一个倒计时组件的示例代码。这个示例中定义了一个计算属性showtime来控制倒计时的显示,以及一个countDown方法来处理倒计时逻辑。在countDown方法中,通过setInterval设定1秒钟执行...

    倒计时十秒后跳转到其它页面源代码

    每次执行时,它会更新页面上的倒计时显示(这里假设有一个id为`countdown`的元素来显示倒计时),并递减剩余秒数。当秒数减至0时,清除定时器并使用`window.location.href`属性改变当前页面的URL,从而实现跳转。 ...

    精简实用的倒计时代码,最好的倒计时代码

    本资源提供了一个精简实用的倒计时代码,适用于JavaScript和jQuery环境,易于理解和定制。以下是对这个倒计时代码的核心知识点的详细解释: 1. **倒计时原理**:倒计时通常是通过计算当前时间与设定结束时间之间的...

    html5 css3圆形进度条倒计时页面跳转代码

    在这个“html5 css3圆形进度条倒计时页面跳转代码”项目中,我们可以看到这两者如何结合,创造出动态且吸引用户的界面效果。 首先,HTML5的新特性允许开发者创建更加结构化的网页元素,例如`&lt;article&gt;`、`&lt;section&gt;...

    jquery数字读秒的倒计时代码.zip

    在这个"jquery数字读秒的倒计时代码.zip"压缩包中,我们可能会找到一个基于jQuery实现的倒计时功能,它在网页上显示剩余时间,通常用于活动预告或考试计时等场景。 倒计时代码的核心原理是利用JavaScript的Date对象...

    网站简约404页面倒计时跳转源码.zip

    "网站简约404页面倒计时跳转源码.zip"是一个包含HTML源码的压缩包,用于创建一个具有倒计时功能的404页面,它会在设定的时间后自动跳转到预设的网页。这样的设计可以避免用户长时间停留在错误页面上,减少用户流失。...

    一个PHP倒计时代码的例子

    如果是网页应用,可以创建一个定时器(`setInterval`函数)每隔一段时间就请求服务器更新倒计时状态。 ```javascript function updateCountdown() { // 使用Ajax请求获取服务器上的倒计时数据 $.ajax({ url: '...

    jQuery网站建设中倒计时代码.zip

    本资源"jQuery网站建设中倒计时代码.zip"提供了一种黑色创意的倒计时设计方案,用于创建一个即将开放的页面模板。 首先,我们来详细了解一下jQuery中的倒计时实现原理。jQuery本身并不直接包含倒计时的功能,但可以...

    HTML5网页倒计时代码特效.zip

    在本例中,我们关注的是HTML5的一个特殊应用——网页倒计时代码特效。 倒计时通常用于网站上预告活动、产品发布或者截止日期等场景,为用户提供一种直观的时间感知。HTML5网页倒计时代码特效利用了HTML5中的`&lt;time&gt;...

    2016年七夕情人节倒计时代码.zip

    在这个倒计时代码中,HTML可能会包含一个特定的容器元素,用于显示倒计时的时间信息。例如,可以使用&lt;div id="countdown"&gt;&lt;/div&gt;来创建一个区域,然后通过JavaScript动态更新这个区域的内容。 接着,CSS被用来美化...

    一款用于倒计时的html5代码

    综合以上,这个HTML5倒计时代码集成了前端开发的三大核心技术,提供了一个轻量级、可定制的解决方案。无论是前端开发者还是对网页编程感兴趣的用户,都可以通过学习和修改这个代码来提升自己的技能,同时满足各种倒...

    倒计时代码倒计时代码

    根据给定的信息,本文将详细解释倒计时代码的相关知识点,包括如何在HTML页面中实现一个简单的倒计时功能。 ### 一、倒计时代码的实现原理 倒计时功能通常通过编程语言来实现,这里展示的是使用JavaScript在HTML...

    jquery倒计时插件多个倒计时同时计时代码

    首先,我们需要一个基础的jQuery倒计时插件。这个插件通常包含以下核心功能: 1. **初始化倒计时**:在页面加载时,为每个倒计时元素设定初始时间,例如通过HTML数据属性设置。 2. **定时更新**:使用`setInterval`...

    Vue网页倒计时代码.zip

    在Vue网页倒计时代码.zip这个压缩包中,我们可以预见到包含了一个使用Vue.js实现的网页倒计时功能的示例。倒计时功能在网页应用中非常常见,比如用于活动倒计时、考试倒计时等场景。下面,我们将深入探讨Vue.js如何...

Global site tag (gtag.js) - Google Analytics