倒计时，在网页制作中会经常用到，特别是一些节日活动页面运用更是广泛。今天就和大家分享一下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. PHP面向对象.__set()，__get()，__isset()，__unset()四个方法的

    一般来说,总是把类的属性定义为private,这更符合现实的逻辑.但是, 对属性的读取和赋值操作是非常频繁的,因此在PHP5中,预定义了两个函数”__get()”和”__set()”来获取和赋值其属性 ...

  2. asp.net前台代码中引入namespace的方法

    <%@ import NameSpace="System.Data.OleDb" %>

  3. 用fxc.exe编译shader文件（*.fx, *.hlsl）的设置

    原文出自:http://msdn.microsoft.com/en-us/library/windows/desktop/bb509709(v=vs.85).aspx#Profiles 拿DX11 S ...

  4. 1.springMVC+spring+Mybatis的整合思路

    SSM整合的过程:就是把一些东西交给spring管理,也就是添加配置文件的一个过程.那么有哪些东西我们要交给spring管理呢?大概有以下几个: 1.数据源(可配置数据库连接池) 2.SqlSessi ...

  5. python install_opener用法

    opener:当你获取一个URL时,你使用一个opener(OpenerDirector).正常情况下我们一直使用默认的opener,通过urlopen,但你也可以创建自定义的openers. url ...

  6. Pureftpd

    在lnmp目录下运行./pureftpd.sh 如下:[root@cloud lnmp1.3-full]# 执行./pureftpd.sh 使用命令 Install Pure-FTPd complet ...

  7. MySQL中auto_increment的基本特性

    创建数据表时,经常会出现auto_increment这个词,下面就来了解一下它吧. MySQL的中AUTO_INCREMENT类型的属性用于为一个表中记录自动生成ID功能,可在一定程度上代替Oracl ...

  8. funny_python 00 The Zen of Python

    # 打算每天多动的时候尽量搜索一些和coding相关的funny stuff Day 00 - PEP 20 The Zen of Python 在shell里面输入python -m this 回车 ...

  9. PowerDesigner反向工程PostgreSQL数据库

    1． 环境准备: a)         安装PowerDesigner,以PowerDesigner15.1为例 b)         安装java jdk,以jdk-7-windows-i586为例 ...

  10. PHP的版本选择 （转）

    PHP的版本选择 http://yubosun.akhtm.com/tech/php-version.htm PHP版本特别多,特别杂,想自己搭一套php的运行环境可不是一件容易的事,稍不留神就遇到一 ...