<!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. 一些git命令

    git push --set-upstream origin release  强制将add的数据提交到  release分支.

  2. ace-下载-安装

    安装ACE 1.获取安装包 到ACE的官方网站http://www.cs.wustl.edu/~schmidt/ACE.html或者http://riverace.com/index.htm下载最新版 ...

  3. ubuntu14.10设置开机启动服务

    1.比如lampp其他的都类似: 我是这么操作:(屌丝初学者) a.把lampp启动程序放到/etc/bin下面 b.vi /etc/rc.local ,加入lampp start(有了第一步就可以这 ...

  4. getWritableDatabase()与getReadableDatabase()方法

    一旦在程序中得到了SQLiteOpenHelper对象之后,程序无须使用SQLiteDatabase的静态方法创建SQLiteDatabase实例,而且可以使用getWritableDatabase( ...

  5. S1 ： 传递参数

    ECMAScript 中所有函数的参数都是按值传递的.也就是说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样.基本类型值的传递如同基本类型变量的复制一样,而引用类型值的传 ...

  6. POJ 1062 昂贵的聘礼 最短路 难度:0

    http://poj.org/problem?id=1062 #include <iostream> #include <cstring> #include <queue ...

  7. SAP iDoc 概念及管理

    创建IDOC:   第一步:WE31 创建IDOC所包含的字段.   第二步:WE30 创建IDOC 把Segment分配给IDOC   第三步:WE81  创建信息类型   第四步:WE82   把 ...

  8. mac下安装apache+php+mysql

    运行“sudo apachectl start”,再输入帐号密码,这样Apache就运行了. 运行“sudo apachectl -v”,你会看到Mac OS X 10.6.3中的Apache版本号: ...

  9. 【C++】String类实现

    //string.h #include <iostream> using namespace std; class String; istream& operator>> ...

  10. HQL查询及Hibernate对c3p0连接池的支持

    //HQL查询 // auto-import要设置true,如果是false,写HQL时要指定类的全名 //查询全部列 Query query = session.createQuery(" ...