倒计时，在网页制作中会经常用到，特别是一些节日活动页面运用更是广泛。今天就和大家分享一下jQuery如何实现倒计时。话不多说，言归正传，倒计时开始：

首先，既然是用jQuery实现，那么前提就是要先引入jQuery文件（最好是用最新的版本），请看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时demo</title>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="remainSeconds" style="display:none">180000</div>
<div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900">
    倒计时：
    <span id="day"></span>天
    <span id="hour"></span>时
    <span id="minite"></span>分
    <span id="second"></span>秒
</div>
</body>
<script type="text/javascript" language="javascript">
    var SysSecond;
    var InterValObj;
    $(document).ready(function() {
        SysSecond = parseInt($("#remainSeconds").html());
        InterValObj = window.setInterval(SetRemainTime, 1000);
    });
    function SetRemainTime() {
        if (SysSecond > 0) {
            SysSecond = SysSecond - 1;
            var second = Math.floor(SysSecond % 60);
            var minite = Math.floor((SysSecond / 60) % 60);
            var hour = Math.floor((SysSecond / 3600) % 24);
            var day = Math.floor((SysSecond / 3600) / 24);
//            $("#remainTime").html(day + "天" + hour + "小时" + minite + "分" + second + "秒");
            //或者这样写，
            $("#day").html(day);
            $("#hour").html(hour);
            $("#minite").html(minite);
            $("#second").html(second);
        } else {
            window.clearInterval(InterValObj);
        }
    }
</script>
</html>

一个简单的倒计时就完成了，OK！谢谢阅读！

倒计时（jQuery）的更多相关文章

  1. jQuery倒计时插件

    倒计时jQuery插件 引言 最近又换工作了,还不错,我换工作的次数其实有点频繁,2014年7月份毕业,到现在工作已经换了3份了,工资跟刚毕业时候相比也涨了点儿,最近一次换工作我离开了深圳,来到了北京 ...

  2. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

  3. jQuery中$(function() {});问题详解

    $(function() {});是$(document).ready(function(){ })的简写,最早接触的时候也说$(document).ready(function(){ })这个函数是 ...

  4. jquery资源

    一.时间日期: 倒计时jQuery插件 Countdown :http://code.google.com/p/jquery-countdown/ 使用案例:http://www.tieyou.com ...

  5. CSS3动画制作的简单示例

    CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

  6. web前端网页特效大全导航列表

    CSS3和Html5 图表与图形 表单验证 导航菜单 table选项卡 视频播放器 日期和时间 返回顶部 图层代码 滚动代码 幻灯片 文字特效 图片放大镜 juqery焦点图 瀑布流 广告悬浮代码 在 ...

  7. js+CSS实现模拟华丽的select控件下拉菜单效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jQuery获取短信验证码+倒计时实现

    jQuery 短信验证码倒计时 <script type="text/javascript" charset="utf-8"> $(function ...

  9. jQuery简单倒计时插件

    一. 效果预览 二. 实现 1. 按照特定的类结构布局. 2. 需要先引入jQuery,再引入此文件. /** * Author: CC11001100 * * 简单倒计时 * * 1. 支持页面内同 ...

  10. 倒计时的js实现 倒计时 js Jquery

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...

随机推荐

  1. delphi中midas是什么

    Delphi中MIDAS到底是什么呢?和他相关组件是什么呢?   MIDAS(Multitiered Distributed Application Services)多层分布式应用服务.   Del ...

  2. Net分布式系统之三：Keepalived+LVS+Nginx负载均衡之高可用

    上一篇写了nginx负载均衡,此篇实现高可用(HA).系统整体设计是采用Nginx做负载均衡,若出现Nginx单机故障,则导致整个系统无法正常运行.针对系统架构设计的高可用要求,我们需要解决Nginx ...

  3. SQL语言

    SQL语言的分类:DDL DML DQL DCL SQL中的操作无非就是(增删改查) DDL:Data Query Language,数据查询语言! 主要是用来定义和维护数据库的各种操作对象,比如库. ...

  4. msdn webcast 下载地址整理

    http://blog.csdn.net/he_8134/article/details/2069194

  5. linux 命令之comm

    1. 简介 comm命令可以用于两个文件之间的比较,它有一些选项可以用来调整输出,以便执行交集.求差.以及差集操作. 交集:打印出两个文件所共有的行. 求差:打印出指定文件所包含的且不相同的行. 差集 ...

  6. Linux基础-常用命令

    常用的压缩命令 一.tar 1.压缩:tar zcvf [压缩包名].tar.gz [待压缩的文件名 ... ] 2.解压缩:tar zxvf [压缩包名].tar.gz -C [指定的解压目录] 3 ...

  7. JAVA 中数据库连接的方法之一

    /** * 数据库连接类 * */ package com.cn.MysqlConnect; import java.sql.Connection;import java.sql.DriverMana ...

  8. WCF、WebAPI、WCFREST、WebService之间的区别

    注明:转载 在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下,你有很多的选择来构建一个HTTP Services.我 ...

  9. WEB中的GET和POST

    客户端提交数据到服务器端有两种方式GET和POST,get是将数据拼接到url上,而post是将数据封装在request body中,发送过去.顾名思义,get即请求数据,有时需要其附带部分参数:po ...

  10. python 整齐输出与编码读写

    # -*- coding:utf-8 -*- # Author:mologa for x in range(1,11): print(repr(x).rjust(2),repr(x*x).rjust( ...