jQuery 倒计时功能的实现例子整理

例子1

 代码如下 复制代码

倒计时<span id="mTime" style="font-size:36px;color:Red">60</span>秒。
<script type="text/javascript">
//页面加载完成就开始执www.111cn.net行倒计时功能
$(document).ready(function () {
   timeDown();
});

//jQuery 倒计时功能
function timeDown() {
    var mTime = $("#mTime").text();
    $("#mTime").text(–mTime);
    if (mTime > 0){
        setTimeout("timeDown()", 1000);
    }
   
}
</script>

例子2

 代码如下 复制代码

<!--载入jQuery库-->
<script type="text/javascript" src=" jquery-1.7.2.min.js"></script>

<!--min为分钟,sec为秒钟-->
<div><span id="min"></span>:<span id="sec"></span></div>

<script>
    var timerc=0; //全局时间变量(秒数)
    function add(){ //加时函数
        if(timerc < 300){ //如果不到5分钟
            ++timerc; //时间变量自增1
            $("#min").html(parseInt(timerc/60)); //写入分钟数
            $("#sec").html(Number(parseInt(timerc%60/10)).toString()+(timerc%10)); //写入秒数(两位)
            setTimeout("add()", 1000); //设置1000毫秒以后执行一次本函数
        };
    };
    add(); //首次调用add函数
</script>

例子3

 

 代码如下 复制代码
var fnTimeCountDown = function(d, o){
    var f = {
        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 future = new Date(d), now = new Date();
            //现在将来秒差值
            var dur = Math.round((future.getTime() - now.getTime()) / 1000) + future.getTimezoneOffset() * 60, pms = {
                sec: "00",
                mini: "00",
                hour: "00",
                day: "00",
                month: "00",
                year: "0"
            };
            if(dur > 0){
                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";
            }
            return pms;
        },
        ui: function(){
            if(o.sec){
                o.sec.innerHTML = f.dv().sec;
            }
            if(o.mini){
                o.mini.innerHTML = f.dv().mini;
            }
            if(o.hour){
                o.hour.innerHTML = f.dv().hour;
            }
            if(o.day){
                o.day.innerHTML = f.dv().day;
            }
            if(o.month){
                o.month.innerHTML = f.dv().month;
            }
            if(o.year){
                o.year.innerHTML = f.dv().year;
            }
            setTimeout(f.ui, 1000);
        }
    };   
    f.ui();
};

有一些倒计时会有一些效果,这些效果只是我们做的input框的效果了,大家可以让美工自行做一下,我们只要知道倒计时调用的ID名字就可以了,只要ID名字不改变就没有关系的哦。

时间: 2024-11-01 10:07:44

jQuery 倒计时功能的实现例子整理的相关文章

jquery实现倒计时功能_jquery

本文实例为大家分享了jquery倒计时功能的实现代码,供大家参考,具体内容如下 定义和用法: setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. 下面举例 <html> <head> <meta charset="utf-8&

10 款精致的 jQuery 倒计时插件推荐

倒计时功能在很多项目中都会使用到,比如网站维护.团购网站和限时下载网站等等.通过使用jQuery倒计时插件,你可以简化你的工作量,却同样创造出超酷的jQuery倒计时功能.  本文整理了10款jQuery倒计时插件,希望为你的工作提供一些帮助.  1.5sec Maintenance Mode  此插件用于网站维护时,平息用户因无法访问网站而带来的愤怒.它有6个模板可供你选择.  源码/演示  2.Premium Coming Soon  新奇.现代.用户界面友好的倒计时页面能让你的用户清楚的记

求一个ssh+json+jquery+ajax 登录功能实现的例子

问题描述 求一个ssh+json+jquery+ajax 登录功能实现的例子 ssh+json+jquery+ajax 登录时action业务处理逻辑是如何实现的 以及前台的js如何处理后台的数据 解决方案 http://bbs.csdn.net/topics/390839699http://download.csdn.net/detail/iamcychan/3635220 解决方案二: http://blog.csdn.net/evankaka/article/details/4702397

基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)_jquery

相关阅读: 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能) 今天测试提了一个bug,发送短信倒计时功能,要求关闭页面也要进行倒计时.这想到了,当年我参与的周杰伦演唱会的先付先抢功能.与之类似,只不过,那个项目的时间都是服务器时间,本人目前有点偷懒,就用客户端的时间了. 一下是完整的代码,只不过在客户端的效率不是很好. <!doctype html> <html lang="en"> <head> <meta

jQuery短信验证倒计时功能实现方法详解_jquery

本文实例讲述了jQuery短信验证倒计时功能实现方法.分享给大家供大家参考,具体如下: <!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" > &l

jQuery实现发送验证码并60秒倒计时功能_jquery

本文给大家分享一段js代码关于实现验证码功能并在60秒后倒计时功能.废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta content="width=device-width,initial-scale=1.0,ma

jQuery基于扩展简单实现倒计时功能的方法_jquery

本文实例讲述了jQuery基于扩展简单实现倒计时功能的方法.分享给大家供大家参考,具体如下: jQuery.fn.countDown = function(settings,to) { settings = jQuery.extend({ startFontSize: '36px', endFontSize: '12px', duration: 1000, startNumber: 10, endNumber: 0, callBack: function() { } }, settings);

jQuery实现简单倒计时功能的方法_jquery

本文实例讲述了jQuery实现简单倒计时功能的方法.分享给大家供大家参考,具体如下: 1.效果图如下: 2.html代码: <div class="timeFix"> <div class="daojishi" id="09/04/2016 00:00:00"> <span class="timeh"></span> <span class="timem"

整理8个很棒的 jQuery 倒计时插件和教程_jquery

jQuery 倒计时插件和教程. jQuery Countdown spriteTimer php ajax/jquery countdown Add a Countdown Timer on Your Website jQuery Flipclock Fancy Countdown Cool jQuery Countdown Joomla jQuery Countdown