<!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. day02 while循环 运算符 格式化输出 编码

     今日主要内容 while循环:判断条件是否成立. 如果成立执行循环体.然后再次判断条件,.....直到条件不成立的时候跳出循环 语法: while 条件: 循环体 else: 当条件不成立的时候执行 ...

  2. Big Txt File(一)

    对于当今的数据集来说,动不动就上G的大小,市面的软件大多不支持,所以需要自己写一个. 常见的txt文本行形式存储的时候也不过是行数多些而已,可以考虑只观测部分行的方式,基于这个思路可以搞一个大数据的浏 ...

  3. 【原创】Proxmark3系列教程1——PM3用法

    1 PM3介绍 proxmark3是一款开源的RFID安全研究平台黑色按钮从图中我们可以看到左上方有一颗黑色按钮,这个按钮就是Proxmark3的功能键,主要用于启动嗅探模式以及停止进程功能,其中内置 ...

  4. 今天想写一下关于SpringMVC的视图解释器

    昨天我写了一下SpringMVC最爱金丹的项目的配置流程,这样搭建完项目之后呢我发现我每个请求都得加个.do什么的后缀,这让我开发得很不爽,于是呢今天就想配置一下这个试图解释器,这样做的目的有两个:第 ...

  5. C# 保存屏幕截图

    //屏幕宽 int iWidth = Screen.PrimaryScreen.Bounds.Width; //屏幕高 int iHeight = Screen.PrimaryScreen.Bound ...

  6. Ubuntu软件中心闪退

    sudo apt-get update sudo apt-get dist-upgrade sudo apt-get install --reinstall software-center

  7. DAX和Power BI中的参考日期表

    本文使用Power BI模板描述DAX中的引用Date表,可以在Analysis Services模型中使用相同的技术.在Dax Date Template页面下载最新版本的模板. 为什么引用Date ...

  8. 【oracle】生成AWR报告

    [第一步]找到awrrpt.sql文件 [ora11g@vm-kvm11820-app ~]$ locate awrrpt.sql /DATA/opt/app/ora11g/product//rdbm ...

  9. syslog日志打印

    最近syslog出了一次问题,我们配置了不同appname打印到不同文件.现在用不同appname打印log的时候,偶然会混在一起.检查过配置后,觉得不是配置问题,如果是配置问题应该每一条都会打错位置 ...

  10. vue axios 取消上次请求

    axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...