zoukankan      html  css  js  c++  java
  • [JS]javascript倒计时

      今天写东西需要用到倒计时,还挺有意思的,就贴出来了,希望能帮到其他人,写的不是很好,希望多提宝贵意见。

    HTML代码

    <div class="price_time">
        <div>
            <span class="font1">起团价:</span>
            <span class="font2"><span class="font4">¥</span>{$goods.team_price}</span>
            <span class="font3">{$goods.market_price}</span>
        </div>
        <div>
            <span class="font_time">00</span>
            <span class="font_time1">:</span>
            <span class="font_time">00</span>
            <span class="font_time1">:</span>
            <span class="font_time">00</span>
            <span class="font_time1">:</span>
            <span class="font_time">04</span>
        </div>
    </div>


    JS 代码

    /**
     * Created by Yu on 16/1/5.
     */
    var I = {
        slideIndex: 1,
        slideLength: 0,
        slideT: 0,
        sTime: 2000,
        lastT: 0,
        lTime: 0,
        lDay: {},
        lHour: {},
        lMinutes: {},
        lSeconds: {},
        numFat: function (num) {
            num = num.toString();
            if (num.length == 1) {
                return "0" + num;
            } else {
                return num;
            }
        },
        lastTimeInit: function () {
            //获取倒计时内容
            var i = 0;
            $(".price_time div .font_time").each(function (index, item) {
                console.log(index + ":" + $(item).text());
                switch (i) {
                    case 0:
                        I.lDay.obj = $(item);
                        I.lDay.value = $(item).text();
                        break;
                    case 1:
                        I.lHour.obj = $(item);
                        I.lHour.value = $(item).text();
                        break;
                    case 2:
                        I.lMinutes.obj = $(item);
                        I.lMinutes.value = $(item).text();
                        break;
                    case 3:
                        I.lSeconds.obj = $(item);
                        I.lSeconds.value = $(item).text();
                        break;
                }
                i++;
            });
            //开始倒计时
            I.lastT = setInterval(function () {
                // I.lTime++;
                console.log(I.lSeconds.value);
                //
                if (0 == I.lSeconds.value) {
                    I.lSeconds.value = 59;
                    //
                    if (0 == I.lMinutes.value) {
                        I.lMinutes.value = 59;
                        //
                        if (0 == I.lHour.value) {
                            I.lHour.value = 23;
                            //
                            if (0 == I.lDay.value) {
                                //清零
                                I.lSeconds.value = 0;
                                I.lMinutes.value = 0;
                                I.lHour.value = 0;
                                //停止定时器
                                clearTimeout(I.lastT);
                                //隐藏购买按钮
                                $(".buy_button").hide();
                            }
                            else {
                                I.lDay.value--;
                            }
                        } else {
                            I.lHour.value--;
                        }
                    } else {
                        I.lMinutes.value--;
                    }
                } else {
                    I.lSeconds.value--;
                }
                //
                I.lSeconds.obj.text(I.numFat(I.lSeconds.value));
                //
                I.lMinutes.obj.text(I.numFat(I.lMinutes.value));
                //
                I.lHour.obj.text(I.numFat(I.lHour.value));
                //
                I.lDay.obj.text(I.numFat(I.lDay.value));
            }, 1000);
        },
        init: function () {
            //倒计时事件
            I.lastTimeInit();
        }
    }
    $(function () {
        I.init();
    });
  • 相关阅读:
    BZOJ 3670: [Noi2014]动物园 [KMP]
    BZOJ 3569: DZY Loves Chinese II [高斯消元XOR 神题]
    BZOJ 2419: 电阻 [高斯消元 物理]
    BZOJ 2844: albus就是要第一个出场 [高斯消元XOR 线性基]
    BZOJ 4269: 再见Xor [高斯消元 线性基]
    BZOJ 2115: [Wc2011] Xor [高斯消元XOR 线性基 图]
    HDU 3949 XOR [高斯消元XOR 线性基]
    BZOJ 4004: [JLOI2015]装备购买 [高斯消元同余 线性基]
    BZOJ 3105: [cqoi2013]新Nim游戏 [高斯消元XOR 线性基]
    BZOJ 1770: [Usaco2009 Nov]lights 燈 [高斯消元XOR 搜索]
  • 原文地址:https://www.cnblogs.com/flyingMonkey/p/5131039.html
Copyright © 2011-2022 走看看