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 ...

随机推荐

mcrypt加密与解密
$key = 'test'; $result_array = array('name' => 'ta', 'age' => 28); $str = encode($result_array ...
Spark Streaming揭秘 Day11 Receiver Tracker的具体实现
Spark Streaming揭秘 Day11 Receiver Tracker的具体实现 ReceiverTracker是运行在Driver上Receiver管理程序,今天让我们深入学习一下. 核心 ...
clrscr( )用法
函数名: clrscr 功能: 清除文本模式窗口,清屏的意思,即把之前显示出的文字字符去掉,是clear screen的简写用法: void clrscr(void); 程序例: #incl ...
配置node与express初试
http://www.nodejs.org/下载对应系统的node版本并安装用npm包管理器安装需要的包 sudo npm install -g express sudo npm install - ...
Google面试题
今天早上在Quora上看到的一个题目,很不错的!最直观的是枚举n^3,但稍微进步一点的观察是找出3个数,然后最大的减去最小的2倍的结果,然后就有了线性扫一遍就OK. Given three array ...
使用自定义任务审批字段创建 SharePoint 顺序工作流
http://msdn.microsoft.com/zh-cn/library/hh824675(v=office.14).aspx#odc_sp14_ta_CreatingSPSeqWorkflow ...
HttpWebRequest
同步请求===================================================================================== byte[] da ...
iOS10 权限崩溃问题-b
手机升级了 iOS10 Beta,然后用正在开发的项目装了个ipa包,发现点击有关权限访问直接Crash了,并在控制台输出了一些信息: This app has crashed because ...
对日期和时间的处理 NSCalendar
代码较老,供参考 NSCalendar用于处理时间相关问题.比如比较时间前后.计算日期所的周别等. 1. 创建或初始化可用以下方法 + (id)currentCalendar; 取得当前用户的逻辑日历 ...
解决mysql中表字符集gbk，列字符集Latin1，python查询乱码问题
最近在公司碰到一个异常蛋疼的情况,mysql数据库中,数据库和表的字符集都是'gbk',但是列的字符集却是'latin1',于是蛋疼的事情出现了. 无论我连接字符串的`charset`设置为`gbk` ...

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

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

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

随机推荐

热门专题