jquery网页倒计时效果，秒杀，限时抢购！

<!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网页倒计时效果，秒杀，限时抢购！的更多相关文章

jquery网页倒计时效果，秒杀
function FreshTime(){ var endtime=new Date('2019-4-12 18:00:00');//结束时间 var nowtime = new Date();//当 ...
【转载】jquery版的网页倒计时效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
jquery版的网页倒计时效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
jQuery实现倒计时效果-杨秀徐
本实例效果:剩余368天22小时39分57秒结束代码简单易懂,适用各种倒计时: <!DOCTYPE html> <head> <title>jQuery实现倒计时 ...
JQuery实现倒计时效果
首先:引入jquery文件 <script type="text/javascript" src="http://www.cnblogs.com/Content/P ...
javascript实现网页倒计时效果
一.HTML代码如下: <div class="timer" id="timer"> <span style="color: bla ...
超实用的JavaScript代码段 --倒计时效果
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
超实用的JavaScript代码段 Item1 --倒计时效果
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
Javascript 实现倒计时效果
代码来自于网上. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

随机推荐

wordpress在Linux nginx下权限设置
1.wordpress 权限对安装和使用效果的影响很大:权限错误将影响theme的安装:不能安装theme或者修改theme或删除theme. 相关设置: chmod 755 wordpress f ...
javascript跨域解决方案
最近遇到了https跨域访问http域的问题,很多朋友理所当然的认为简单,问题是https跨域访问到http域上的资源,会进行相互通信,没有解决该问题,只能把外部资源扔到了新浪的sae上,通过http ...
一个不错的图片滑动展示插件 anythingslider
一个不错的图片http://css-tricks.com/anythingslider-jquery-plugin/ DEMO演示: http://css-tricks.github.io/Anyth ...
实现在DevExpress.XtraGrid.GridControl的列头绘制复选框以实现全选的功能
首先新建一个Win Form测试项目,拖一个GridControl控件到窗体上. public partial class Form1 : Form { public Form1() { Initia ...
CodeForces 18C
Description Once Bob took a paper stripe of n squares (the height of the stripe is 1 square). In eac ...
Oracle “CONNECT BY” 使用
Oracle “CONNECT BY” 使用功能说明: 语法结构如下: [ START WITH condition ] CONNECT BY [ NOCYCLE ] condition 说明: 1 ...
iphone编程，使用代码结束程序
(ios 4环境) 1.使用代码可以结束自己只有一种方式,而且apple不建议这样用,就是调用exit()函数.在2.0以前uiapplication类中有一个方法可以调用,但是现在已经没有了,而且如 ...
1201: [HNOI2005]数三角形 - BZOJ
Description Input 大三角形的所有短边可以看成由(n+1)*n/2个单位三角形的边界组成.如下图的灰色三角形所示.其中第1排有1个灰色三角形,第2排有2个灰色三角形,……,第n排有n个 ...
maven插件mybatis-generator生成代码配置
鸣谢:http://my.oschina.net/u/1763011/blog/324106?fromerr=nJakGh4P (也可参看此博客进行配置) http://www.cnblogs.com ...
[cc150] check palindrome of a singly linked list
Problem: Implement a function to check if a singly linked list is a palindrome. 思路: 最简单的方法是 Reverse ...

jquery网页倒计时效果，秒杀，限时抢购！

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

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

随机推荐

热门专题