<!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. 用indexof来统计字符出现的次数

    代码如下: <!DOCTYPE html> <html lang="en"> <head>     <meta charset=" ...

  2. 通过ajax提交表单上传文件

    //这是看的大神的.//原地址:https://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html $("#sub" ...

  3. MySQL中查询、删除重复记录的方法大全

    查找所有重复标题的记录: select title,count(*) as count from user_table group by title having count>1; SELECT ...

  4. Java如何按空格读取内容

    String s = input.nextLine(); String[] data = s.split(" ");

  5. Vue-cli里面引用stylus遇到的问题总结

    1.stylus的调用 在vue-cli中用到stylus样式处理器的时候一定要引用两个对应的报stylus  stylus-loader 命令:cnpm install stylus stylus- ...

  6. Consider defining a bean of type 'com.lvjing.dao.DeviceStatusMapper' in your configuration.

    "C:\Program Files\Java\jdk1.8.0_181\bin\java.exe" "-javaagent:C:\Program Files\JetBra ...

  7. 关于TCP和MQTT之间的转换（转载）

    现在物联网流行的就是MQTT 其实MQTT就是在TCP的基础上建立了一套协议 可以看这个,本来我自己想用Wireshark监听一下,不过百度一搜索一大把,我就不测试了 https://blog.csd ...

  8. Mac 电脑终端上传项目到github上

    1.安装Git  去官网自己研究(这个是很全的,也很详细:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b806 ...

  9. linux下centos解压时报错：　gzip: stdin: not in gzip format 　　tar: Child returned status 1 　　tar: Error is not recoverable: exiting now

    最近在linux下安装python时,解压Python.tgz文件时遇到一个问题:          gzip: stdin: not in gzip format      tar: Child r ...

  10. Ubuntu如何使用Vscode写C++代码

    (一). 下载Vscode (1). 打开Ubuntu软件 (2). 搜索Vscode,下载并运行. (二). 安装C++ (1). 看到右边的列表,点击最下面的 (2). 然后我们搜索和下载 C++ ...