[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 = 59;
                        //天
                        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();
});
时间: 2024-08-04 00:20:09

[JS]javascript倒计时的相关文章

一个简单的js实现倒计时函数

<!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" xml:lang="zh-cn"> <head> <met

js实现倒计时60秒的简单代码(推荐)

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js实现倒计时60秒的简单代码(推荐)</title> <script type="text/javascript"

JS时间倒计时

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf8" /><title>JS时间倒计时</title><script type="text/javascript">var time_

JS实现倒计时(天数,时,分,秒)

<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title>JS实现倒计时(天数,时,分,秒)</title> <link rel="stylesheet" type="text/css" href="../css/reset.css"> <link rel="sty

js实现倒计时及时间对象

JS实现倒计时效果代码如下: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title>h 6 <style> 7 #box { 8 width: 100%; 9 height: 400px; 10 background: black; 11 color: #fff; 12 font-size:4

Atitit.js javascript异常处理机制与java异常的转换.js exception process Voae

Atitit.js javascript异常处理机制与java异常的转换.js exception processVoae 1. 1. javascript异常处理机制 1 2. 2. Web前后台异常的统一处理 1 3.  java异常转换为js异常 1 3. -------------详细代码 2 1. 1. javascript异常处理机制 Throw str Not throw error  ..cause ie,ff error obj is diff.. 2. 2. Web前后台异常

Atitit.&#160;数据约束&#160;校验&#160;原理理论与&#160;架构设计&#160;理念模式java&#160;php&#160;c#.net&#160;js&#160;javascript&#160;mysql&#160;oracle

Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle 1. 主键1 2. uniq  index2 3. 检查约束 (Check Counstraint) 对该列数据的范围.格式的限制(如:年龄.性别等)2 4. 默认约束 (Default Counstraint) 该数据的默认值2 5. trigger2 6. 外键机制  参照完整性:2 7. 断言约束:不必与特定的列绑定,可以理解为能应用于多个表的

Javascript倒计时组件new TimeSpan(hours, minutes, minutes)

function TimeSpan(h, m, s) { this.h = Number(h); this.m = Number(m); this.s = Number(s); } TimeSpan.prototype = { timer: null, stop: function() { }, callback: Function(), start: function(callback) { var self = this; if (callback) { this.callback = ca

js javascript:void(0) 真正含义

http://www.cnblogs.com/opper/archive/2009/01/12/1373971.html js javascript:void(0) 真正含义 我想使用过ajax的都常见这样的代码:<a href="javascript:doTest2();void(0);">here</a>但这儿的void(0)究竟是何含义呢?Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值.void 操作符用法格式如下:1