<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>jquery版的网页倒计时效果</title>

    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">

    <meta name="format-detection" content="telephone=no" />

    <meta content="yes" name="apple-mobile-web-app-capable" />

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <style type="text/css">

    .time-item strong {

        background: #C71C60;

        color: #fff;

        line-height: 49px;

        font-size: 36px;

        font-family: Arial;

        padding: 0 10px;

        margin-right: 10px;

        border-radius: 5px;

        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);

    }

    #day_show {

        float: left;

        line-height: 49px;

        color: #c71c60;

        font-size: 32px;

        margin: 0 10px;

        font-family: Arial, Helvetica, sans-serif;

    }

    .item-title .unit {

        background: none;

        line-height: 49px;

        font-size: 24px;

        padding: 0 10px;

        float: left;

    }

    </style>

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script type="text/javascript">

    var intDiff = parseInt(500000); //倒计时总秒数量

    function timer(intDiff) {

        window.setInterval(function() {

            var day = 0,

                hour = 0,

                minute = 0,

                second = 0; //时间默认值

            if (intDiff > 0) {

                day = Math.floor(intDiff / (60 * 60 * 24));

                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);

                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);

                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);

            }

            if (minute <= 9) minute = '0' + minute;

            if (second <= 9) second = '0' + second;

            $('#day_show').html(day + "天");

            $('#hour_show').html('<s id="h"></s>' + hour + '时');

            $('#minute_show').html('<s></s>' + minute + '分');

            $('#second_show').html('<s></s>' + second + '秒');

            intDiff--;

        }, 1000);

    }

    $(function() {

        timer(intDiff);

    });

    </script>

</head>

<body>

    <div class="time-item">

        <span id="day_show">0天</span>

        <strong id="hour_show">0时</strong>

        <strong id="minute_show">0分</strong>

        <strong id="second_show">0秒</strong>

    </div>

    <!--倒计时模块-->

</body>

</html>

改造，支持多个倒计时同时进行！

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>jquery版的网页倒计时效果</title>

    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">

    <meta name="format-detection" content="telephone=no" />

    <meta content="yes" name="apple-mobile-web-app-capable" />

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <style type="text/css">

    .time-item strong {

        background: #C71C60;

        color: #fff;

        line-height: 49px;

        font-size: 36px;

        font-family: Arial;

        padding: 0 10px;

        margin-right: 10px;

        border-radius: 5px;

        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);

    }

    .day_show {

        float: left;

        line-height: 49px;

        color: #c71c60;

        font-size: 32px;

        margin: 0 10px;

        font-family: Arial, Helvetica, sans-serif;

    }

    .item-title .unit {

        background: none;

        line-height: 49px;

        font-size: 24px;

        padding: 0 10px;

        float: left;

    }

    </style>

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script type="text/javascript">

    var firstIntDiff = parseInt(500000); //倒计时总秒数量

    var secondIntDiff = parseInt(5000); //倒计时总秒数量

    function timer(intDiff,idName) {

        window.setInterval(function() {

            var day = 0,

                hour = 0,

                minute = 0,

                second = 0; //时间默认值

            if (intDiff > 0) {

                day = Math.floor(intDiff / (60 * 60 * 24));

                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);

                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);

                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);

            }

            if (minute <= 9) minute = '0' + minute;

            if (second <= 9) second = '0' + second;

            $(idName+' .day_show').html(day + "天");

            $(idName+' .hour_show').html('<s id="h"></s>' + hour + '时');

            $(idName+' .minute_show').html('<s></s>' + minute + '分');

            $(idName+' .second_show').html('<s></s>' + second + '秒');

            intDiff--;

        }, 1000);

    }

    $(function() {

        timer(firstIntDiff,'#first');

        timer(secondIntDiff,'#second');

    });

    </script>

</head>

<body>

    <div id="first" class="time-item">

        <span class="day_show">0天</span>

        <strong class="hour_show">0时</strong>

        <strong class="minute_show">0分</strong>

        <strong class="second_show">0秒</strong>

    </div>

    <!--倒计时模块-->

    <div id="second" class="time-item">

        <span class="day_show">0天</span>

        <strong class="hour_show">0时</strong>

        <strong class="minute_show">0分</strong>

        <strong class="second_show">0秒</strong>

    </div>

</body>

</html>

jquery网页倒计时效果，秒杀，限时抢购！的更多相关文章

  1. jquery网页倒计时效果，秒杀

    function FreshTime(){ var endtime=new Date('2019-4-12 18:00:00');//结束时间 var nowtime = new Date();//当 ...

  2. 【转载】jquery版的网页倒计时效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. jquery版的网页倒计时效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. jQuery实现倒计时效果-杨秀徐

    本实例效果:剩余368天22小时39分57秒结束 代码简单易懂,适用各种倒计时: <!DOCTYPE html> <head> <title>jQuery实现倒计时 ...

  5. JQuery实现倒计时效果

    首先:引入jquery文件 <script type="text/javascript" src="http://www.cnblogs.com/Content/P ...

  6. javascript实现网页倒计时效果

    一.HTML代码如下: <div class="timer" id="timer"> <span style="color: bla ...

  7. 超实用的JavaScript代码段 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

  8. 超实用的JavaScript代码段 Item1 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

  9. Javascript 实现倒计时效果

    代码来自于网上. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

随机推荐

  1. java的CyclicBarrier

    CyclicBarrier直译叫循环屏障,作用有点像赛跑时吹哨的角色,它有2个构造方法,一个是int的arg1,另一个多了一个Runable的arg2 arg1:可以看做此次参加赛跑的人数 arg2: ...

  2. js获取url参数值的两种方式

    js获取url参数值的方法有很多,下面也为大家介绍两种.  方法一:正则分析法  function getQueryString(name) {  var reg = new RegExp(" ...

  3. Delphi中的四舍五入函数

    一.Delphi中的四舍五入法     四舍五入是一种应用非常广泛的近似计算方法,针对不同的应用需求,其有算术舍入法和银行家舍入法两种.     所谓算术舍入法,就是我们通常意义上的四舍五入法.其规则 ...

  4. Oracle 动态视图1 V$LOCK

    v$lock显示数据库当前持有锁情况 Column Datatype Description SID NUMBER 会话ID TYPE VARCHAR2(2) 表示锁的类型.值包括TM,TX,等 ID ...

  5. 1046 Shortest Distance (20)

    #include<stdio.h> int main() { int n,m,a,b,tem,pre,p; int i,j; ]; while(scanf("%d",& ...

  6. 【ibatis】cachemodel、属性 及特殊配置

    http://www.cnblogs.com/13590/archive/2013/03/01/2938126.html <?xml version="1.0" encodi ...

  7. [译] ASP.NET 生命周期 – ASP.NET 应用生命周期（一）

    概述 ASP.NET 平台定义了两个非常重要的生命周期.第一个是 应用生命周期  (application life cycle),用来追踪应用从启动的那一刻到终止的那一刻.另一个就是 请求生命周期 ...

  8. Xcode文档下载与安装路径

    https://developer.apple.com/library/downloads/docset-index.dvtdownloadableindex ~/Library/Developer/ ...

  9. java、js的编码、解码

    如果在地址栏挂载参数,特别是包含中文,往往要进行编码,取值时再解码,以下是java和js中编码.解码的各自方法. java: @Test public void test3() throws Unsu ...

  10. 使用Unity拦截一个返回Task的方法

    目标 主要是想为服务方法注入公用的异常处理代码,从而使得业务代码简洁.本人使用Unity.Interception主键来达到这个目标.由于希望默认就执行拦截,所以使用了虚方法拦截器.要实现拦截,需要实 ...