倒计时，在网页制作中会经常用到，特别是一些节日活动页面运用更是广泛。今天就和大家分享一下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. LIKE模糊查询的通配符

    LIKE模糊查询的通配符 通配符 说明 示例 % 包含零个或多个字符的任意字符串. WHERE title LIKE '%computer%' 将查找在书名中任意位置包含单词 "comput ...

  2. scrollview背景头部拉伸

    a - (void)viewDidLoad { [super viewDidLoad]; self.tableView.contentInset = UIEdgeInsetsMake(kImageOr ...

  3. Java NIO教程 目录

    "Java NIO系列教程" 是笔者hans为NIO的初学者编写的一份入门教程,想仔细学习的同学可以按照顺序去阅读.由于我学的也不是特别的精,所以错误.疏漏在所难免,希望同学们指正 ...

  4. 运行WPS遇到的问题及解决办法

    http://www2.mmm.ucar.edu/wrf/OnLineTutorial/Class/cases/find_the_bugs.php# For this case we are goin ...

  5. 在Android项目中引入MuPdf

    由于公司手机App要加入一个附件查看功能,需要查看PDF文件,在网上找了许多第三方工具,最后选择了MuPDF. 更多第三方工具可以查看大神总结的:http://www.cnblogs.com/poke ...

  6. GridLayout自定义数字键盘(两个EditText)

    功能说明: 适用于两个EditText输入框,并控制输入字符的长度,点击键盘中的"确定"按钮完成输入,点击"前一项"光标跳到前一个EditText 运行效果图如 ...

  7. Facade设计模式

    Facade模式 Facade模式要求一个子系统的外部与其内部的通信必须通过一个统一的Facade对象进行.Facade模式提供一个高层次的接口,使得子系统更易于使用. 就如同医院的接待员一样,Fac ...

  8. 总结--解决 mysql 中文乱码

    首先分析一下导致mysql 中文乱码的原因: 1.建表时使用了latin 编码 2.连接数据库的编码没有指定 3.写入时就已经乱码(这种情况需要自己检查源数据了) 解决方法总结: 1.创建库时指定编码 ...

  9. [刘阳Java]_什么是MyBatis_第1讲

    1.什么MyBatis,我们先通过百度百科先进行一个简单的了解 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation ...

  10. python学习之——selenium元素定位

    web自动化测试按步骤拆分,可以分为四步操作:定位元素,操作元素,获取返回结果,断言(返回结果与期望结果是否一致),最后自动出测试报告. 其中定位元素尤为关键,此篇是使用webdriver通过页面各个 ...