<!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. vue项目中，使用vue-awesome-swiper插件实现轮播图

    一.安装 npm install vue-awesome-swiper 二.项目中引入 import 'swiper/dist/css/swiper.css'import {swiper,swiper ...

  2. mysql 的存储过程_多字段

    mysql 的存储过程 一.准备工作 新建一个表 /*Navicat MySQL Data Transfer Source Server : localhost_3306Source Server V ...

  3. The eventual following stack trace is caused by an error thrown for debugging purposes as well as to attempt to terminate the thread which caused the illegal access, and has no functional impact.

    好久没有冒泡了,最近在新环境上搭建应用时,启动报错: INFO: Illegal access: this web application instance has been stopped alre ...

  4. python学习-python入门

    开始学习python,开始记录. 第一个小程序:登陆系统 功能:1.通过文件名和密码导入用户名和密码~ 2.用户输入用户名和密码 3.将用户输入的用户名进行比对,先判断用户名是否在黑名单里面,如果在黑 ...

  5. ip代理简单方法

    requests.post(url-url,headers=headers,data=data,proxies={'https':'192.165.1.56:8000'}

  6. python--sort()和sorted()高级排序

    1.list中的sort()方法: def sort(self, key=None, reverse=False): # real signature unknown; restored from _ ...

  7. 2019 Power BI最Top50面试题，助你面试脱颖而出系列<下>

    Q:什么是附加题? A:这就是常说的送分可选题,可做可不做:也可以说是加分项,是难点提升题. Power BI 面试题 — 附加题 33)什么是 Power View? 答案: Power View是 ...

  8. Java中语法与C/CPP的区别

    static不能在成员方法中定义,只能作为类变量定义.

  9. 信号报告-java

    无线电台的RS制信号报告是由三两个部分组成的: R(Readability) 信号可辨度即清晰度. S(Strength) 信号强度即大小. 其中R位于报告第一位,共分5级,用1-5数字表示. 1-- ...

  10. ewfwefwefe

    qwdefwef fwefwef