<!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. JQuery日记_5.14 Sizzle选择器(七)

    上篇说道,tokenize方法会把selector切割成一个个selector逻辑单元(如div>a是三个逻辑单元 'div','>','a')并为之片段赋予相应类型的过滤函数. for ...

  2. Ruby中map, collect,each,select,reject,reduce的区别

    # map 针对每个element进行变换并返回整个修改后的数组 def map_method arr1 = ["name2", "class2"] arr1. ...

  3. ionic在iOS中打包失败

    在ios中打包失败,遇上这样的错误 解决办法,查看index.html的权限是否是只读状态,如果是,改成可读可写,再次打包重试,成功!

  4. C/C++获取当前系统时间

    个人觉得第二种还是比较实用的,而且也是最常用的~ 不过当计算算法耗时的时候,不要忘记second,不能只要用Milliseconds来减,不然后出现负值,若是算法耗时太长就得用minutes啦.再不然 ...

  5. C# 获取当前路径方法(转)

    C# 获取当前路径方法 //获取包含清单的已加载文件的路径或 UNC 位置. public static string sApplicationPath = Assembly.GetExecuting ...

  6. Mysql中处理1970年前的日期（unixtime为负数的情况）负数时间戳格式化

    客户扔过来一个bug,说是一个系统中对42岁以上的人的统计不正确,而41岁以下的人没有问题.眼睛瞟了一下托盘区里的日期,2012年3月26日,嗯,今年42岁的话,那么应该就是出生在1970年左右,马上 ...

  7. Redis之ZSet命令

    0.前言 Redis有序集合ZSet可以按分数进行排序, 存储结构可能使用ziplist,skiplist和hash表, zset_max_ziplist_entries和zset_max_zipli ...

  8. 关于http和rpc的区别（segmentfault上的回答）

    问题最近用了谷歌的grpc,所以对rpc和http有一点疑惑,感觉这两个东西功能上是一样的,rpc某个服务监听某一个方法,客户端调用这个方法,返回相应的数据,和http监听某个方法的路由 返回相应的数 ...

  9. 知也atitit.解决struts2 SpringObjectFactory.getClassInstance NullPointerException  v2 q31无涯 - I

    atitit.解决struts2 SpringObjectFactory.getClassInstance NullPointerExceptionv2 q31 1. #--现象 java.lang. ...

  10. string::find_last_of

    今天在代码中用到string的这个方法,一不小心就用错了. 这是http://www.cplusplus.com/关于这个方法的解释. Find character in string from th ...