本实例效果：剩余368天22小时39分57秒结束

代码简单易懂，适用各种倒计时；

<!DOCTYPE html>

<head>

    <title>jQuery实现倒计时效果-杨秀徐</title>

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

    <script type="text/javascript">

        /*

        @作者：杨秀徐，主页 http://www.gzmsg.com

        @用途：jQuery实现倒计时效果$(".time").countDown({time: "2015/12/1 10:00:00",type:0})

        @参数：time: 结束时间,type:显示方式（0显示天数，1不显示天数）

        */

        $.fn.countDown = function (opt) {

            var opt = $.extend({

                time : null,

                type : 0

            }, opt);

            var edtime   = new Date(opt.time).getTime(),                  //月份是实际月份-1

	            edsecond = (edtime - new Date().getTime()) / 1000;  

            var eday    = $(this).find('.day'),

                ehour   = $(this).find('.hour'),

                eminute = $(this).find('.minute'),

                esecond = $(this).find('.second');

            var timer = setInterval(function () {

                if (edsecond > 1) {

                    edsecond -= 1;

                    var day = Math.floor((edsecond / 3600) / 24),

                    hour = Math.floor((edsecond / 3600) % 24),

                    minute = Math.floor((edsecond / 60) % 60),

                    second = Math.floor(edsecond % 60);

                    if(opt.type===0){

                        $(eday).text(day);                                  //计算天

                        $(ehour).text(hour < 10 ? "0" + hour : hour);       //计算小时

                    }else{

                        hour = day * 24;

                        $(ehour).text(hour < 10 ? "0" + hour : hour);       //计算小时-没有天数

                    }

                    $(eminute).text(minute < 10 ? "0" + minute : minute);   //计算分钟

                    $(esecond).text(second < 10 ? "0" + second : second);   //计算秒杀

                } else {

                    clearInterval(timer);

                }

            }, 1000);

        }

        $(function () {

            $(".time").countDown({

                time: "2015/12/1 10:00:00",

                type:0

            });

        });

    </script>

</head>

<body>

    <div class="time">剩余<span class="day">0</span>天<span class="hour">00</span>小时<span class="minute">00</span>分<span class="second">00</span>秒结束</div>

</body>

</html>

jQuery实现倒计时效果-杨秀徐的更多相关文章

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

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

  2. JQuery实现倒计时效果

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

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

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

  4. Javascript 实现倒计时效果

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

  5. jQuery Countdown Timer 倒计时效果

    这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...

  6. jQuery CircleCounter的环形倒计时效果

    在线演示1 本地下载 使用jQuery插件CircleCounter生成的环形倒计时效果,这个插件使用HTML5画布生成动画效果,还不错,大家可以试试! 顺带手录制了个代码,大家不吝赐教:http:/ ...

  7. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

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

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

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

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

随机推荐

  1. Windows Phone本地数据库（SQLCE）：1、介绍（翻译）（转）

    一只大菜鸟,最近要学习windows phone数据库相关的知识,找到了一些比较简短的教程进行学习,由于是英文的,顺便给翻译了.本身英语水平就不好,估计文中有不少错误,如果有不幸读到的童鞋请保持对翻译 ...

  2. 利用Fiddler和Wireshark解密SSL加密流量

    原文地址:http://kelvinh.github.io/blog/2014/01/12/decrypt-ssl-using-fiddler-and-wireshark/ Fiddler是一个著名的 ...

  3. ormlite 在android中 排序 条件查询

    ormlite 在android中 排序 条件查询 all = dao.queryBuilder().orderBy("Id", true).where().eq("Ty ...

  4. 架构：Eventually Consistent - Revisited

    原文地址:http://i.cnblogs.com/EditPosts.aspx?opt=1. I wrote a first version of this posting on consisten ...

  5. python测试开发django-34.xadmin管理后台

    前言 django自带的admin后台管理页面有点丑陋,于是网上的大神优化了一版后台管理xadmin,并且开源了,在github开源下载到源码. 注意环境搭配: django 2.1.2 xadmin ...

  6. ps -ef | grep 查看进程命令

    通过 ps -ef | grep redis 查看当前Redis 的进程情况.

  7. 使用kubectl创建部署

    本文使用自己利用VirtubalBox搭建的集群环境,暂时只有一个Master.一个Node.如果想了解集群的搭建,可以参考我的文章离线环境安装Kubernetes集群以及使用kubeadm安装kub ...

  8. Java命令学习系列（零）——常见命令及Java Dump介绍

    一.常用命令: 在JDK的bin目彔下,包含了java命令及其他实用工具. jps:查看本机的Java中进程信息. jstack:打印线程的栈信息,制作线程Dump. jmap:打印内存映射,制作堆D ...

  9. [转]MySQL单列索引和组合索引的区别介绍

    FROM : http://database.ctocio.com.cn/353/11664853.shtml MySQL单列索引是我们使用MySQL数据库中经常会见到的,MySQL单列索引和组合索引 ...

  10. 洛谷 P1138 第k小整数

    题目描述 现有n个正整数,n≤10000,要求出这n个正整数中的第k个最小整数(相同大小的整数只计算一次),k≤1000,正整数均小于30000. 输入输出格式 输入格式: 第一行为n和k; 第二行开 ...