<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>倒计时测试</title>

<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>

<script>

  function lxfEndtime(){

          $(".lxftime").each(function(){

                var lxfday=$(this).attr("lxfday");//用来判断是否显示天数的变量

                var endtime = new Date($(this).attr("endtime")).getTime();//取结束日期(毫秒值)

                var nowtime = new Date().getTime();        //今天的日期(毫秒值)

                var youtime = endtime-nowtime;//还有多久(毫秒值)

                var seconds = youtime/1000;

                var minutes = Math.floor(seconds/60);

                var hours = Math.floor(minutes/60);

                var days = Math.floor(hours/24);

                var CDay= days ;

                var CHour= hours % 24;

                var CMinute= minutes % 60;

                var CSecond= Math.floor(seconds%60);//"%"是取余运算，可以理解为60进一后取余数，然后只要余数。

                if(endtime<=nowtime){

                        $(this).html("已过期")//如果结束日期小于当前日期就提示过期啦

                        }else{

                                if($(this).attr("lxfday")=="no"){

                                        $(this).html("<i>剩余时间：</i><span>"+CHour+"</span>时<span>"+CMinute+"</span>分<span>"+CSecond+"</span>秒");          //输出

没有天数的数据

                                        }else{

                        $(this).html("<i>剩余时间：</i><span>"+days+"</span><em>天</em><span>"+CHour+"</span><em>时</em><span>"+CMinute+"</span><em>分

</em><span>"+CSecond+"</span><em>秒</em>");          //输出有天数的数据

                                }

                        }

          });

   setTimeout("lxfEndtime()",1000);

  };

$(function(){

      lxfEndtime();

   });

</script>

<style type="text/css">

<!--

*{

        font-style: normal;

        font-weight: normal;}

.haveday {

        padding: 20px;

        border: 1px dashed #000;

        margin-right: auto;

        margin-left: auto;

        width: 300px;

}

-->

</style>

</head>

<body>

<div class="haveday">

<h1>含有天数的倒计时</h1>

<div class="lxftime" endtime="11/15/2015 17:24:0"></div>

<div class="lxftime" endtime="11/8/2015 3:3:20"></div>

<div class="lxftime" endtime="9/6/2015 6:1:0"></div>

<div class="lxftime" endtime="6/6/2016 9:3:5"></div>

</div>

<p></p>

<div class="haveday">

<h1>没有天数的倒计时</h1>

<div class="lxftime" endtime="11/15/2015 17:24:0" lxfday="no"></div>

<div class="lxftime" endtime="11/8/2015 3:3:20" lxfday="no"></div>

<div class="lxftime" endtime="9/6/2015 6:1:0" lxfday="no"></div>

<div class="lxftime" endtime="6/6/2016 9:3:5" lxfday="no"></div>

</div>

</body>

</html>

http://www.codefans.net/jscss/code/2893.shtml

JQuery 实现倒计时的更多相关文章

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

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

  2. jQuery自适应倒计时插件

    jQuery自适应倒计时插件 在线演示本地下载

  3. jQuery实现倒计时重新发送短信验证码功能示例

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

  4. jquery.countdown 倒计时插件的学习

    1.第一种简单的使用 第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...

  5. jquery实现倒计时

    <html> <head> <meta charset="utf-8"/> <title>jquery实现倒计时</title ...

  6. jQuery控制倒计时

    1.1 秒杀的倒计时 做秒杀网页总免不了倒计时,但没有很好的服务器,啥资源都没有,只能将部分任务交给浏览器去处理,比如秒杀首页的倒计时,因为真正秒杀是在具体页面,首页只是展示而已,所以误差一点是允许的 ...

  7. jQuery简单倒计时插件

    一. 效果预览 二. 实现 1. 按照特定的类结构布局. 2. 需要先引入jQuery,再引入此文件. /** * Author: CC11001100 * * 简单倒计时 * * 1. 支持页面内同 ...

  8. jQuery TimeCircles 倒计时

    在线实例 默认 倒计时 使用方法 <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;&qu ...

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

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

  10. jquery 60s倒计时

    前端开发中经常用到的发送按钮倒计时,每次都是重写,挺麻烦的,记录一下,以后直接来复制代码 <!DOCTYPE html> <html> <head> <met ...

随机推荐

  1. UML类图关系大全

    UML类图关系大全 1.关联 双向关联: C1-C2:指双方都知道对方的存在,都可以调用对方的公共属性和方法.在GOF的设计模式书上是这样描述的:虽然在分析阶段这种关系是适用的,但我们觉得它对于描述设 ...

  2. 《Play for Java》学习笔记（四）Controller

    play的一大优势是可以将HTTP映射到JAVA API代码(Type-safe mapping from HTTP to an idiomatic Scala or Java API),完美的实现了 ...

  3. 算法--数组中出现一次的数，其余都出现N次

    转载:http://blog.csdn.net/morewindows/article/details/12684497 题目:数组A中,除了某一个数字x之外,其他数字都出现了三次,而x出现了一次.请 ...

  4. ACTIVITI 源码研究之命令模式执行

    ACTIVITI 是一个优秀开源软件,通过阅读源码,我们不但可以了解工作流引擎执行的原理还可以增加个人的编码功力. ACTIVITI 所有执行过程都是采用命令模式进行执行. 本文主要描述流程引擎数据保 ...

  5. Octopus系列之如何让前台的js脚本变得灵活重用

    Octopus系列如何让前台的js脚本变得灵活,重用 方式1:ajax方式 方式2:form表单方式 面向对象的脚本封装 jQuery的封装 做Web开发的少不了前台Ajax的使用, 返回true:f ...

  6. 嵌套 click 第二层 click会叠加 导致 触发 多次

    $("#appearHiddenDiv").click(function(){ $("#hiddenDiv").css({display:"block ...

  7. Blackhat EU 2013 黑客大会（Full Schedule for Black Hat USA 2013）

    大会文档下载:https://www.blackhat.com/eu-13/archives.html 此次BH EU 议题整体较水,涉及系统安全.移动安全.网络传输安全.WEB安全.游戏安全等.下面 ...

  8. HTTP(socket)下载遇到valgrind提示的错误： Conditional jump or move depends on uninitialised value(s)

    我写了个http下载函数,下载txt.jpg都正常,就是下载php有问题:valgrind会报错Conditional jump or move depends on uninitialised va ...

  9. POJ 1845 求a^b的约数和

    题目大意就是给定a和b,求a^b的约数和 f(n) = sigma(d) [d|n] 这个学过莫比乌斯反演之后很容易看出这是一个积性函数 那么f(a*b) = f(a)*f(b)  (gcd(a,b) ...

  10. RPI学习--wiringPi_setups

    reference: http://wiringpi.com/reference/setup/ There are four ways to initialise wiringPi. wiringPi ...