<!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. Win7如何自定义桌面右键菜单

    1 在注册表的HKEY_CLASSES_ROOT\DesktopBackground\Shell\位置,我们新建一个计算器,他的下面有一个项目command,然后这个command去打开计算器(通过分 ...

  2. tcp/ip--百度百科

    Transmission Control Protocol/Internet Protocol的简写,中译名为传输控制协议/因特网互联协议,又名网络通讯协议,是Internet最基本的协议.Inter ...

  3. linux c 获取网卡状态（UP or DOWN）

    源代码例如以下: #include <sys/socket.h> #include <sys/ioctl.h> #include <linux/if.h> #inc ...

  4. CentOS最常用命令

    快捷键.常用命令: 文件和目录:# cd /home 进入 '/home' 目录# cd .. 返回上一级目录# cd ../.. 返回上两级目录# cd - 返回上次所在目录# cp file1 f ...

  5. SVN学习（三）——在Eclipse 中安装和使用SVN客户端插件

    0 基本概念了解 0.1 SVN的工作原理:采取客户端/服务器模式——在服务器的版本库中保存项目文件的各个版本,所有参与协同开发的程序员在自己本地电脑上保存一个工作副本.SVN支持程序员将本地副本更新 ...

  6. python（30）- 常用模块

    模块就是py文件.python中能开辟作用域的只有函数.类和模块. for循环不能开辟作用域,for循环内的变量为全局变量.if...else...同for循环一样. 一 time模块 时间表示形式 ...

  7. 【CODEFORCES】 C. Captain Marmot

    C. Captain Marmot time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  8. 硬件（MAC）地址的概念及作用

    概念:MAC地址就是在媒体接入层上使用的地址,也叫物理地址.硬件地址或链路地址,其被固化在适配器的ROM中. 可见MAC地址实际上就是适配器地址或适配器标识符.当某台计算机使用某块适配器后,适配器上的 ...

  9. RAD Studio XE5破解补丁及方法

    通过测试可用,RAD Studio XE5破解补丁及方法 第一步,将下载下来的“delphicbuilder_xe5_win.iso”解压到任意盘,任意目录. 第二步,将“免序列号安装授权文件”文件夹 ...

  10. 过滤NSString中的Emoji

    有时候由于项目需求.要过滤NSString中的emoji. 比方下面情况: 要跟android互通,android假设还没做这方面的支持. 内容做为手机短信发出去. 思路例如以下,遍历NSString ...