<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>多个timeout</title>

    <script src="/Content/js/jquery-1.10.2.min.js" type="text/javascript"></script>

</head>

<body>

 <div>

    <h5 class="text-success">倒计</h5>

    <!-- 已结束 -->

    <p id="order_time_1" data-id="" data-starttime="2019-02-01 11:59:59"  data-endtime="2019-02-02 11:30:59"  class="remain-time">已结束</p>

    <!-- 距多少开始 -->

    <p id="order_time_2" data-id="" data-starttime="2019-03-08 11:30:00"  data-endtime="2019-03-20 12:00:00"  class="remain-time">距多少开始</p>

    <!-- 距多少开始 -->

    <p id="order_time_22" data-id="" data-starttime="2019-03-01 16:42:30"  data-endtime="2019-03-20 12:00:00"  class="remain-time">距多少开始3</p>

    <!-- 距多少结束 -->

    <p id="order_time_3" data-id="" data-starttime="2019-02-01 23:59:59"  data-endtime="2019-03-10 23:59:59"  class="remain-time">距多少结束</p>

    <!-- 距多少结束 -->

    <p id="order_time_33" data-id="" data-starttime="2019-02-01 23:59:59"  data-endtime="2019-03-1 16:44:00"  class="remain-time">距多少结束3</p>

</div>

<script type="text/javascript">

    var jsq = {

        startdata: [],

        enddata: [],

        addStart: function (key, value) {

            if (typeof (jsq.startdata[key]) == 'undefined') {

                jsq.startdata[key] = value;

            }

        },

        addEnd: function (key, value) {

            if (typeof (jsq.enddata[key]) == 'undefined') {

                jsq.enddata[key] = value;

            }

        },

        addAll: function () {

            $(".remain-time").each(function (i) {

                var key = $(this).attr("data-id");

                var startValue = $(this).attr("data-starttime");

                var endValue = $(this).attr("data-endtime");

                //添加计时元素

                if (typeof (jsq.startdata[key]) == 'undefined') {

                    jsq.addStart(key, startValue);

                    jsq.addEnd(key, endValue);

                }

            });

            //执行检测

            jsq.subAll();

        },

        subAll: function () {

            for (var index in jsq.startdata) {

                var nowTime = new Date();

                var startTime = new Date(jsq.startdata[index].toString().replace(/-/g, '/'));

                var endTime = new Date(jsq.enddata[index].toString().replace(/-/g, '/'));

                var S_timestamp = startTime.getTime() - nowTime.getTime();

                var E_timestamp = endTime.getTime() - nowTime.getTime();

                //console.log(startTime);

                if (E_timestamp <= ) //小1秒

                {

                    $('#order_time_' + index).text('已结束 >' + jsq.enddata[index].toString());

                    $('#order_time_' + index).css("color", "red");

                    //$("#order_time_" + key).parent().parent().parent().parent().remove(); //删除

                }

                else if (E_timestamp >  && S_timestamp >= ) //大1秒

                {

                    //提取时间元素

                    var _day = Math.floor(S_timestamp /  /  /  / );

                    var _hour = Math.floor(S_timestamp /  /  /  % );

                    var _min = Math.floor(S_timestamp /  /  % );

                    var _sec = Math.floor(S_timestamp /  % );

                    if (_hour < ) {

                        _hour = "" + _hour;

                    }

                    if (_min < ) {

                        _min = "" + _min;

                    }

                    if (_sec < ) {

                        _sec = "" + _sec;

                    }

                    $('#order_time_' + index).text(_day + "天" + _hour + "时" + _min + "分" + _sec + "秒" + "开始");

                }

                else {

                    //提取时间元素

                    var _day = Math.floor(E_timestamp /  /  /  / );

                    var _hour = Math.floor(E_timestamp /  /  /  % );

                    var _min = Math.floor(E_timestamp /  /  % );

                    var _sec = Math.floor(E_timestamp /  % );

                    if (_hour < ) {

                        _hour = "" + _hour;

                    }

                    if (_min < ) {

                        _min = "" + _min;

                    }

                    if (_sec < ) {

                        _sec = "" + _sec;

                    }

                    $('#order_time_' + index).text(_day + "天" + _hour + "时" + _min + "分" + _sec + "秒" + "结束");

                }

            }

        }

    };

    $(function () {

        //倒计时

        setInterval('jsq.addAll()', );

    });

</script>

</body>

</html>

Jquery 一个页面多个倒计时 实现的更多相关文章

  1. Jquery 一个页面单个倒计时 实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. javascript 一个关于时间排序的算法（一个页面多个倒计时排序）

    上周要做一个活动页面 秒杀列表页 需要一个时间的算法排序 自己琢磨了半天想了各种算法也没搞出来,后来问了下一个后台的php同学 他写了个算法给我看了下 ,刚开始看的时候觉得这就是个纯算法,不能转化成页 ...

  3. jQuery实现发送验证码30s倒计时，且刷新页面时有效

    在这里讲一讲这个案例的实现思路吧(个人见解)..核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 setStyle() 函数.这个函数会根据当前的 c ...

  4. 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个

    自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...

  5. 通过用jQuery写一个页面，我学到了什么

    概述 前几天面试,hr发来一个测试文件,让我做做看.我一看,其实就是根据PSD需求写一个页面,再加上一些互动效果即可. 刚好我之前学了切图,jquery等知识还没练手过,于是高兴的答应了. 最后花了3 ...

  6. jQuery实现页面监听（某一个值发生改变时触发）

    使用jQuery实现页面中监听   页面中某一个值(如input输入框)发生改变时触发. <html> <head> <title>RunJS</title& ...

  7. [jQuery编程挑战]003 克隆一个页面元素及其相关事件

    挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...

  8. 用jquery将多个页面中相似页面显示到一个页面并实现来回跳转

    今天遇到一个问题,客户说页面来回跳转太麻烦了,需要把相似的页面做到一个页面上去. 接下来说一下记录一下解决方法. 首先这是三个页面中相似的Div: <div class="wenti& ...

  9. jQuery 向另一个页面传参，同时跳转到该页面

    为了使参数能够传递到另外一个页面,使用ajax的跳转方式 $.ajax({ type: "POST", url:"/admin/sysjgl/sysjck/sjcs&qu ...

随机推荐

  1. Java程序心得体会

    学习Java是一件快乐的事情,刚开始学习的时候还有点难,后来慢慢熟悉了Java的程序操作,在错误中获得技巧,一次又一次的失败,让我对Java产生了兴趣,现在对Java既陌生又熟悉,我相信我会喜欢上Ja ...

  2. wpf 事件

    事件的本质是 系统消息  再winform中 消息被封装成了事件触发 这种就是 普通事件,特点就是 1对1,以及事件必须能访问到控件 才能绑定 在 wpf中 新概念  路由事件  ,路由区别是 不在是 ...

  3. Python 验证线程是数据共享的

    import os import time from threading import Thread # from multiprocessing import Process #通过对全局变量的修改 ...

  4. 生物信息学工具--bowtie&bowtie2

    Bowtie和Bowtie2使用 [怪毛匠子整理] Source URL: http://www.bbioo.com/lifesciences/40-112837-1.html Bowtie和Bowt ...

  5. windows下python双系统安装

    1.首先安装Python2,确认好Python2的安装位置.接着安装Python3,并确定Python3的安装位置. 2.确认系统变量PATH中有python2和python3各自两个的路径,如: D ...

  6. PSP耗时

  7. mac系统访问windows共享文件夹

    1. 打开finder 2. 找到前往 - 连接服务器 3. 打开后,输入smb://ip地址  点击连接 4. 选择共享文件夹 5. 点击好,之后就可以了,如下图

  8. Android应用程序启动过程

    有没有想过,当我们点击桌面应用程序图标是怎样打开APP启动应用程序的呢? 当我们点击应用图标会调用Launcher的startActivitySafely()方法,方法实现如下,其实是调用的start ...

  9. 使用command line测试网速

    wget -O speedtest-cli https://raw.githubusercontent.com/sivel/speedtest-cli/master/speedtest.py --no ...

  10. ZIP、tar.gz压缩时排除指定目录

    1.ZIP 压缩时排除一个文件夹下所有内容zip -r sss.zip sss/ -x "sss/222/*" 压缩时排除指定多个文件夹下所有内容zip -r sss.zip ss ...