文档章节

很好的时间倒计时js效果

bengozhong
 bengozhong
发布于 2015/11/26 13:55
字数 514
阅读 44
收藏 3
点赞 0
评论 0
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>活动倒计时代码(精确到毫秒)jquery插件 - 懒人建站 http://www.51xuediannao.com/</title>
</head>

<body>

<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    $.extend($.fn,{
        //懒人建站 http://www.51xuediannao.com/
        fnTimeCountDown:function(d){
            this.each(function(){
                var $this = $(this);
                var o = {
                    hm: $this.find(".hm"),
                    sec: $this.find(".sec"),
                    mini: $this.find(".mini"),
                    hour: $this.find(".hour"),
                    day: $this.find(".day"),
                    month:$this.find(".month"),
                    year: $this.find(".year")
                };
                var f = {
                    haomiao: function(n){
                        if(n < 10)return "00" + n.toString();
                        if(n < 100)return "0" + n.toString();
                        return n.toString();
                    },
                    zero: function(n){
                        var _n = parseInt(n, 10);//解析字符串,返回整数
                        if(_n > 0){
                            if(_n <= 9){
                                _n = "0" + _n
                            }
                            return String(_n);
                        }else{
                            return "00";
                        }
                    },
                    dv: function(){
                        //d = d || Date.UTC(2050, 0, 1); //如果未定义时间,则我们设定倒计时日期是2050年1月1日
                        var _d = $this.data("end") || d;
                        var now = new Date(),
                            endDate = new Date(_d);
                        //现在将来秒差值
                        //alert(future.getTimezoneOffset());
                        var dur = (endDate - now.getTime()) / 1000 , mss = endDate - now.getTime() ,pms = {
                            hm:"000",
                            sec: "00",
                            mini: "00",
                            hour: "00",
                            day: "00",
                            month: "00",
                            year: "0"
                        };
                        if(mss > 0){
                            pms.hm = f.haomiao(mss % 1000);
                            pms.sec = f.zero(dur % 60);
                            pms.mini = Math.floor((dur / 60)) > 0? f.zero(Math.floor((dur / 60)) % 60) : "00";
                            pms.hour = Math.floor((dur / 3600)) > 0? f.zero(Math.floor((dur / 3600)) % 24) : "00";
                            pms.day = Math.floor((dur / 86400)) > 0? f.zero(Math.floor((dur / 86400)) % 30) : "00";
                            //月份,以实际平均每月秒数计算
                            pms.month = Math.floor((dur / 2629744)) > 0? f.zero(Math.floor((dur / 2629744)) % 12) : "00";
                            //年份,按按回归年365天5时48分46秒算
                            pms.year = Math.floor((dur / 31556926)) > 0? Math.floor((dur / 31556926)) : "0";
                        }else{
                            pms.year=pms.month=pms.day=pms.hour=pms.mini=pms.sec="00";
                            pms.hm = "000";
                            //alert('结束了');
                            return;
                        }
                        return pms;
                    },
                    ui: function(){
                        if(o.hm){
                            o.hm.html(f.dv().hm);
                        }
                        if(o.sec){
                            o.sec.html(f.dv().sec);
                        }
                        if(o.mini){
                            o.mini.html(f.dv().mini);
                        }
                        if(o.hour){
                            o.hour.html(f.dv().hour);
                        }
                        if(o.day){
                            o.day.html(f.dv().day);
                        }
                        if(o.month){
                            o.month.html(f.dv().month);
                        }
                        if(o.year){
                            o.year.html(f.dv().year);
                        }
                        setTimeout(f.ui, 1);
                    }
                };
                f.ui();
            });
        }
    });
</script>
<div style="padding: 50px;">活动倒计时代码(精确到毫秒)jquery插件 - <a href="http://www.51xuediannao.com/js/jquery/">jquery插件</a>懒人建站:http://www.51xuediannao.com/</div>
<div style="background:rgb(183,17,41);  WIDTH: 100%;  color:#fff;FONT-FAMILY: arial; TEXT-ALIGN: center;">
    <P style="font-size:.8em;line-height:2em;">距活动结束还有:</P>
    <div id="fnTimeCountDown" data-end="2015/11/25 18:45:13">
        <span class="year">00</span>年
        <span class="month">00</span>月
        <span class="day">00</span>天
        <span class="hour">00</span>时
        <span class="mini">00</span>分
        <span class="sec">00</span>秒
        <span class="hm">000</span>
    </div>
</div>
<script type="text/javascript">
    $("#fnTimeCountDown").fnTimeCountDown("2015/11/25 18:45:13");
</script>

</body>
</html>

© 著作权归作者所有

共有 人打赏支持
bengozhong
粉丝 16
博文 428
码字总数 445356
作品 0
深圳
程序员
点击按钮 倒计时60秒方可再次点击发送的Js代码

本节内容: Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果。 比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果。 本文用Javas...

Carl_
2014/08/06
0
0
Ubuntu9.04 正式版发布时间的WEB倒计时代码

在Ubuntu 8.10 正式版发布之前 Ubuntu 官方提供正式版发布时间的WEB倒计时,不知道各位站长是否有加入官方提供的代码到你的网站或者Blog中没有。现在Ubuntu 9.04 正式版也准备发布了,估计是...

晨曦之光
2012/03/09
0
0
Javascript 实现倒计时(10秒)自动关闭网页

JS倒计时10秒 实现功能 实例代码一: <html> <title>倒计时关闭网页</title> <head> <script language="javascript"> var cTime=10;//这个变量是倒计时的秒数设置为10就是10秒 function Tim......

leiboo
2014/04/27
0
0
Jquery常用插件及功能片段

返回顶部 解决手机浏览器bfcache导致的后腿页面js不执行 60S倒计时 禁止浏览器后退 飘入动画 滚动底部加载更多评价 Jquery.clone修复 修复部分浏览器在jquery.clone时 textarea 和 select 标...

麦拂沙
2015/11/03
0
0
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
PHP 面向对象:PHP 实现类商品秒杀计时

比如要做一个限时购物的功能,这就要做到倒计时,要有实时的倒计时。 要求要有小时分钟秒的实时倒计时的显示,用户端修改日期时间不会影响到倒计时的正常显示(也就是以服务器时间为准)。 ...

BENNEE
2011/03/22
0
0
宠物连连看2完整Android代码项目

宠物连连看2完整代码,该源码支持多种风格的连连看游戏的,如有国旗类的连连看,还有宠物连连看的等,基本的功能实现了无尽关卡挑战模式,还有催命倒计时,以及链接提示,暂停,多样图片集,...

tianlongbamu
2015/03/19
0
0
页面定时跳转(倒计时跳转)代码总结

(1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内) 1 <script type="text/javascript"> 2 //3秒钟之后跳转到指定的页面 3 setTimeout(window.location.href='www.baidu.com...

coat
2013/07/24
0
0
北京实习面试总结,四天面试6个公司,有所收获。

这次进京很仓促,对于自己来说其实没有任何预兆,想在北京找个实习,不过现在大三,学校方面压力也很大,导员不允许我出来实习,所以我就偷偷逃课出来了。说说最近几天的面试经历~四天,面试...

明非_
2014/09/25
0
7
Javascript 定时器篇 setTimeout和setInterval

标题定时器,让我想起了年代久远的VB,那时候也有个定时器,长的跟闹钟一样()相信跟我一样用过VB的人都不陌生。很基础的东西,但是作用却很大。记得那时候我还不太会用,忘记是用来做动画了...

九阁网趣
2015/03/06
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

32.filter表案例 nat表应用 (iptables)

10.15 iptables filter表案例 10.16/10.17/10.18 iptables nat表应用 10.15 iptables filter表案例: ~1. 写一个具体的iptables小案例,需求是把80端口、22端口、21 端口放行。但是,22端口我...

王鑫linux
今天
0
0
shell中的函数&shell中的数组&告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析

影夜Linux
今天
0
0
Linux网络基础、Linux防火墙

Linux网络基础 ip addr 命令 :查看网口信息 ifconfig命令:查看网口信息,要比ip addr更明了一些 centos 7默认没安装ifconfig命令,可以使用yum install -y net-tools命令来安装。 ifconfig...

李超小牛子
今天
1
0
[机器学习]回归--Decision Tree Regression

CART决策树又称分类回归树,当数据集的因变量为连续性数值时,该树算法就是一个回归树,可以用叶节点观察的均值作为预测值;当数据集的因变量为离散型数值时,该树算法就是一个分类树,可以很...

wangxuwei
昨天
1
0
Redis做分布式无锁CAS的问题

因为Redis本身是单线程的,具备原子性,所以可以用来做分布式无锁的操作,但会有一点小问题。 public interface OrderService { public String getOrderNo();} public class OrderRe...

算法之名
昨天
9
0
143. Reorder List - LeetCode

Question 143. Reorder List Solution 题目大意:给一个链表,将这个列表分成前后两部分,后半部分反转,再将这两分链表的节点交替连接成一个新的链表 思路 :先将链表分成前后两部分,将后部...

yysue
昨天
1
0
数据结构与算法1

第一个代码,描述一个被称为BankAccount的类,该类模拟了银行中的账户操作。程序建立了一个开户金额,显示金额,存款,取款并显示余额。 主要的知识点联系为类的含义,构造函数,公有和私有。...

沉迷于编程的小菜菜
昨天
1
0
从为什么别的队伍总比你的快说起

在机场候检排队的时候,大多数情况下,别的队伍都要比自己所在的队伍快,并常常懊悔当初怎么没去那个队。 其实,最快的队伍只能有一个,而排队之前并不知道那个队快。所以,如果有六个队伍你...

我是菜鸟我骄傲
昨天
1
0
分布式事务常见的解决方案

随着互联网的发展,越来越多的多服务相互之间的调用,这时候就产生了一个问题,在单项目情况下很容易实现的事务控制(通过数据库的acid控制),变得不那么容易。 这时候就产生了多种方案: ...

小海bug
昨天
3
0
python从零学——scrapy初体验

python从零学——scrapy初体验 近日因为一些事情,需要从网上爬取一些东西,故而想通过使用爬虫来顺便学习下强大的python。现将一些学习中遇到的问题记录下来,以便日后查询 1. 开发环境的准...

咾咔叽
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部