<!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. 简单3D翻转

    1.先上图~~~ 2.代码 html部分 <body> <div id="my3d"> <div id="box"> < ...

  2. api接口通信安全性

    1.采用https协议传输数据 2.白名单.账号密码验证 3.密钥签名token 4.三次握手请求数据前,需要拿到密码才可以请求数据,否则异常

  3. Python urllib2 模块学习笔记

    2015.3.6  urllib2的使用方法大致如下 # 定制Handler处理函数 opener = urllib2.build_opener(ProxyHandler, HTTPHandler) ...

  4. asp 回发的时候样式变化

    在一个按钮确定后弹出一个提示框,在提示框没有关闭时有时会发现页面的样式发生变化. 解决方法: 在DIV外增加,<table><tr><td align="lef ...

  5. Java中的IO流系统详解

    Java 流在处理上分为字符流和字节流.字符流处理的单元为 2 个字节的 Unicode 字符,分别操作字符.字符数组或字符串,而字节流处理单元为 1 个字节,操作字节和字节数组. Java 内用 U ...

  6. [SQL SERVER系列]读书笔记之SQL注入漏洞和SQL调优

    最近读了程序员的SQL金典这本书,觉得里面的SQL注入漏洞和SQL调优总结得不错,下面简单讨论下SQL注入漏洞和SQL调优. 1. SQL注入漏洞 由于“'1'='1'”这个表达式永远返回 true, ...

  7. 1024: [SCOI2009]生日快乐 - BZOJ

    Description windy的生日到了,为了庆祝生日,他的朋友们帮他买了一个边长分别为 X 和 Y 的矩形蛋糕.现在包括windy,一共有 N 个人来分这块大蛋糕,要求每个人必须获得相同面积的蛋 ...

  8. ./configure详解

    'configure'脚本有大量的命令行选项.对不同的软件包来说,这些选项可能会有变化,但是许多基本的选项是不会改变的.带上'--help'选项执行'configure'脚本可以看到可用的所有选项.尽 ...

  9. Recommender Systems 基于知识的推荐

    前两章的协同过滤和就内容的推荐都建立在“大量数据”的基础上,运用概率方法来进行计算和预测.不过,在现实生活中,有些物品,如:汽车.房屋.计算机,用户不会频繁的消费.如何在这种情况下对用户进行推荐? 这 ...

  10. C#跳出循环的几种方法的区别

    break是循环结束执行,执行循环体后面的代码. continue是跳过本次循环未执行的代码,继续执行下一次循环. goto是跳到指定的指令去,你指哪,他跳到哪. return是函数返回,如果循环在M ...