`

一个页面的倒计时代码

    博客分类:
  • js
阅读更多
js:
$(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>  

 

分享到:
评论

相关推荐

    倒计时代码倒计时代码

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

    JS一个页面多个倒计时

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

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

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

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

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

    javascript 实现网页 倒计时 代码

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

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

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

    倒计时-HTML-代码

    在这个倒计时案例中,JavaScript代码可能包含了一个定时器函数,该函数每隔一定时间(比如1秒)更新倒计时的数值,并可能使用`Date`对象来计算剩余时间。此外,JavaScript还可以监听用户操作,比如点击按钮开始或...

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

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

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

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

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

    每次执行时,它会更新页面上的倒计时显示(这里假设有一个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倒计时代码集成了前端开发的三大核心技术,提供了一个轻量级、可定制的解决方案。无论是前端开发者还是对网页编程感兴趣的用户,都可以通过学习和修改这个代码来提升自己的技能,同时满足各种倒...

Global site tag (gtag.js) - Google Analytics