<!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/2017 17:24:0"></div>
<div class="lxftime" endtime="11/8/2017 3:3:20"></div>
<div class="lxftime" endtime="9/6/2017 6:1:0"></div>
<div class="lxftime" endtime="6/6/2017 9:3:5"></div>
</div>
<p></p>
<div class="haveday">
<h1>没有天数的倒计时</h1>
<div class="lxftime" endtime="11/15/2017 17:24:0" lxfday="no"></div>
<div class="lxftime" endtime="11/8/2017 3:3:20" lxfday="no"></div>
<div class="lxftime" endtime="9/6/2017 6:1:0" lxfday="no"></div>
<div class="lxftime" endtime="6/6/2017 9:3:5" lxfday="no"></div>
</div>
</body>
</html>

jQuery倒计时实例的更多相关文章

  1. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  2. 20个非常棒的jQuery倒计时脚本

    使用jQuery倒计时插件可能是最简单最好的方式添加动态和交互式倒数计时器到您的网站上.我相信你已经注意到了,例如倒计时功能运行网站,显示倒计时,直到一个大事件.当网站正在维护,告诉用户什么时候回来, ...

  3. jQuery倒计时插件

    倒计时jQuery插件 引言 最近又换工作了,还不错,我换工作的次数其实有点频繁,2014年7月份毕业,到现在工作已经换了3份了,工资跟刚毕业时候相比也涨了点儿,最近一次换工作我离开了深圳,来到了北京 ...

  4. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  5. jQuery AJAX实例

    <html><head><title>jQuery Ajax 实例演示</title></head><script language= ...

  6. jQuery Ajax 实例 ($.ajax、$.post、$.get)【转载】

    本文转载自:http://jun1986.iteye.com/blog/1399242 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的 ...

  7. jQuery Ajax 实例 ($.ajax、$.post、$.get)转

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...

  8. jquery倒计时（仿团购）转至 http://justcoding.iteye.com/blog/2210962

    倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery实现一个简单的倒计时功能.

  9. jQuery 验证实例(shopnc二次开发)

    shopnc 商家用户实现添加用户与前台用户分离, jQuery 验证实例 equalTo:等于 <div id="saleRefund" show_id="1&q ...

随机推荐

  1. [TypeScript] Dynamically initialize class properties using TypeScript decorators

    Decorators are a powerful feature of TypeScript that allow for efficient and readable abstractions w ...

  2. linux下confstr与uname函数_获取C库与内核信息

    #include <stdio.h> #include <sys/utsname.h> //uname int main(int argc, char **argv[]) { ...

  3. 由friend用法引出的声明与定义那些事儿

    今天遇到了一个问题,大致描述一下就是有两个类A和B.我想达到如下效果:B是A的友元,同时A是B的类类型成员. 第一次尝试,在B.h中包含A.h,在A.h中包含B.h,在A类中声明friend clas ...

  4. Hibernate单向“一对多”关联

    1. 基于连接表的单向“一对多”关联,应该优先被采用其中指定many-to-many的unique="true",为单向“一对多”,不指定就是单向“多对多” <class n ...

  5. C#绑定事件时使用匿名函数

    当使用一些临时的函数 可以预知这些函数基本不会被复用时  可以使用匿名函数简化代码 public static void startCoupons() { //绑定一些事件 userGetCoupon ...

  6. Atitit.java 虚拟机的构成 与指令分类 与 指令集合 以及字节码查看工具javjap

    Atitit.java 虚拟机的构成 与指令分类 与 指令集合 以及字节码查看工具javjap 1.1. 虚拟机的构成 java虚拟机--处理器.堆栈.寄存器.指令系统. 1 1.2. 虚拟机执行过程 ...

  7. MapReduce-MulitipleOutputs实现自己定义输出到多个文件夹

    输入源数据例子: Source1-0001 Source2-0002 Source1-0003 Source2-0004 Source1-0005 Source2-0006 Source3-0007 ...

  8. 史上最简单的springcloud微服务入门实例，满足企业日常需求，开箱即用，工资翻倍不是梦

    在传统的IT行业软件大多都是各种独立系统的堆砌,这些系统的问题总结来说就是扩展性差,可靠性不高,维护成本高.到后面引入了SOA服务化,但是,由于 SOA 早期均使用了总线模式,这种总线模式是与某种技术 ...

  9. awk overview

    VARIABLES, RECORDS AND FIELDS AWK  variables are dynamic; they come into existence when they are fir ...

  10. android-studio于java相关

      1.安装和配置 在安装完成android-studio后,启动,配置project structure.包括SDK.JDK等,此开发工具需要自行下好,软件无自带. 配置完成后,通过:File--& ...