<!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. SAP资产变动明细

    *&---------------------------------------------------------------------* *& Report ZFIR027 * ...

  2. SAP smartforms之Zebra print control language

    因为在做个小标签的时候需要将部分字符旋转180度,在scn上找了很久也发布了自己的提问,不过最终的结果却不尽人意.Rotated text in smartforms need use the PCL ...

  3. HTML 基础知识——8月8日

    一.基础知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  4. iOS开发错误日志

    错误提示:fatal error: file '/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platfor ...

  5. BZOJ1584 [Usaco2009 Mar]Cleaning Up 打扫卫生

    令$f[i]$表示以i为结尾的答案最小值,则$f[i] = min \{f[j] + cnt[j + 1][i]^2\}_{1 \leq j < i}$,其中$cnt[j + 1][i]$表示$ ...

  6. ajax使用jquery的实现方式

    1.jquery的ajax方法. $("#ajaxbtn").click(function(){ $.ajax({ url:"json.do", beforeS ...

  7. hihocode ---1032

    #include<iostream> #include<cstring> #include<cstdio> using namespace std; + ; ]; ...

  8. Hibernate中的集合映射

    1.定义实体 public class User { private int userId; private String userName; private Set<String> ad ...

  9. Xcode6中segue取消原push与modal(deprecated)

    xcode6 之后push 和modal 就被废弃了.只能用于ios8之前.在拖线的时候我们就可以看见. 这两个方法被废弃了,我们需要找到合适的方法来代替,这时候我们发现 show 和Present ...

  10. java udp网络编程

    import java.net.*; /* 通过UDP传输发送文字数据 1.建立socket服务 2.提供数据,并封装到数据包中 3.通过sokect服务的发送功能,将数据包发送出去 4.关闭资源 * ...