<!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. 对石家庄铁道大学网站的UI分析

    学校网站的首页面的色调用的比较好看,用深蓝色体现了严谨治学的风范.然后就是网站的首页有 1,学校概况:学校简介 现任领导 历任领导 校史沿革 2,组织机构: 机构设置 院系设置 管理机构 直属单位 其 ...

  2. DOM节点-appendChild

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  3. uva 12186

    12186 - Another Crisis Time limit: 3.000 seconds A couple of years ago, a new world wide crisis star ...

  4. （置顶）js实现超过页面一屏后，点击图标滚动到页面顶部top

    <script type="text/javascript">$(document).ready(function() {    var ScrolltoTop = $ ...

  5. oracle Redhat64 安装

    详细可以参考:http://blog.csdn.net/chenfeng898/article/details/8782679 直接执行如下yum安装命令后,如果再出错,跳到2 yum -y inst ...

  6. CSS3学习教程：Media Queries详解

    说起CSS3的新特性,就不得不提到 Media Queries . Media Queries 的引入,其作用就是允许添加表达式用以确定媒体的情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

  7. a标签的css样式四个状态的设计

    表示所有状态下的连接 如 a{color:red} ① a:link:未访问链接 ,如 a:link {color:blue} ② a:visited:已访问链接 ,如 a:visited{color ...

  8. MySql插入记录时判断

    我们在开发数据库相关的逻辑过程中, 经常检查表中是否已经存在这样的一条记录, 如果存在则更新或者不做操作, 如果没有存在记录,则需要插入一条新的记录. 这样的逻辑固然可以通过两条sql语句完成. SE ...

  9. Exif的Orientation信息说明

    EXIF Orientation 参数让你随便照像但都可以看到正确方向的照片而无需手动旋转(前提要图片浏览器支持,Windows 自带的不支持) 这个参数在佳能.尼康相机照的照片是自带的,但我的奥林巴 ...

  10. Android Phonebook编写联系人UI加载及联系人保存流程（二）

    2014-01-06 17:18:29 1. Phonebook中新建/编辑联系人的UI不是用xml文件写的,它是随着帐号类型的改变来加载不同的UI,比如SIM联系人,只有Name.Phone Num ...