<!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. Python机器学习（基础篇---监督学习（朴素贝叶斯））

    朴素贝叶斯 朴素贝叶斯分类器的构造基础是贝叶斯理论.采用概率模型来表述,定义x=<x1,x2,...,xn>为某一n维特征向量,y∈{c1,c2,...ck}为该特征向量x所有k种可能的类 ...

  2. Linux 安装python3.4

    不要动现有的python2环境! 不要动现有的python2环境! 不要动现有的python2环境! 默认yum好用 默认环境不全 1. 安装环境 yum -y install zlib zlib-d ...

  3. Ubuntu 修改sudoers之后无法用sudo怎么恢复

    进入终端 键入 pkexec visudo 修改sudoer.temp 实例如下 ## This file MUST be edited with the 'visudo' command as ro ...

  4. 斐讯 天天牛绑定教程 邀请码：8vozbf

    天天牛邀请码 8vozbf 可以领取4代牛 最近斐讯推出了天天牛养成计划. 不过官方没有任何的指示教程,所以个人分享一个教程给大家. 1. 先把把旧的钱包备份一下 ,切记!! 而且一定要记得自己设的密 ...

  5. keil折叠代码

    在代码页面右键 Outlining->Start All Outlining

  6. 解构赋值 Destructuring Assignment

    解构赋值 Destructuring Assignment ES6中可以通过一定的模式将数组或对象中的值直接赋值给外部变量,称为解构 对象的解构赋值 // 在ES5中,当需要获取一个对象中的变量值的时 ...

  7. 学习java一个月的进展

    作为一个阶段性总结,有很多的东西需要说明,有细节的,有架构的,且听我细细说来. java和php最大的区别不止是类型的强制定义,而是在设计思路上有着非常重大的偏差(虽然SY3框架已经开始借鉴JAVA的 ...

  8. mac安装brew简单方法

    安装方法:命令行输入 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ma ...

  9. spring cloud_1_mm_ribbon

    ji接上文 ribbon做请求分发负载均衡 ribbon 配置: server.port=9999 spring.application.name=ribbon-consumer #stores.ri ...

  10. 数组中array==null和array.length==0的区别

    //代码public class Test1 { public static void main(String[] args) { int[] a1 = new int[0]; int[] a2 = ...