<!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. Java 容器（集合）

    import java.util.*; 一.基础概念 1.什么是容器? 2.为什么需要容器? 3.容器的分类? 二.重点知识 List接口 Collections类 (1)为什么需要? Collect ...

  2. 5月23日 JavaScript

    一.JavaScript简介 1.JavaScript是什么: 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它的用法: 在HTML中位置有三块: (1)head里面 (2)bod ...

  3. Java集合——Map接口

    1.定义 Map用于保存存在映射关系<key,value>的数据.其中,key值不能重复(使用equals()方法比较),value值可以重复 2.方法 V  put(key,value) ...

  4. H-The Cow Lineup（POJ 1989）

    The Cow Lineup Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 5367   Accepted: 3196 De ...

  5. 实验一 Java开发环境的熟悉境的熟悉

    - 运行结果: (一)命令行下Java程序开发 (二)Eclipse下Java程序开发.调试 设置断点和单步运行 单步运行:Step Into(快捷捷F5)和Step Over(快捷捷F5) 使程序直 ...

  6. Java开发 Eclipse使用技巧(转)

    1.如何设置默认的代码目录为src,默认的输出目录为bin? window->Preferences->java->Build Path中,右侧选择Folders就可以 2.如何为快 ...

  7. gawk

    gawk '$2>365&&$3>1' part-00000 | wc -l

  8. BZOJ1576 [Usaco2009 Jan]安全路经Travel

    首先用Dijkstra做出最短路生成树,设dis[p]为1到p点的最短路长度 对于一条不在生成树上的边u -> v,不妨设fa为u.v的lca 则一fa到v的路径上的任意点x都可以由u达到,走的 ...

  9. mysqldump导出－－数据+结构+（函数+存储过程）

    #导出某个数据库--结构+数据shell>mysqldump -h192.168.161.124 -uroot -pxxxxxx --opt db_name |gzip -9 > /db_ ...

  10. Div层的展开与收缩的代码

    <html> <head> <title>div展开收缩代码</title> <style> * { margin:0; padding:0 ...