倒计时（jQuery）

时间：2023-01-03 20:07:18

倒计时，在网页制作中会经常用到，特别是一些节日活动页面运用更是广泛。今天就和大家分享一下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中&dollar;&lpar;function&lpar;&rpar; &lbrace;&rcub;&rpar;&semi;问题详解

    $(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&plus;CSS实现模拟华丽的select控件下拉菜单效果

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

  8. jQuery获取短信验证码&plus;倒计时实现

    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. Primer – 支撑 GitHub 的 CSS 工具包和准则

    Primer 是一个 CSS 工具包,支撑着 GitHub 的前端设计.它的目的仅限于提供通用部件,为我们的开发者提供最大的灵活性,并保持 GitHub 的独特风格.它基于 SCSS 建成,可以通过 ...

  2. Matlab判断鼠标移动

    set(gcf,'WindowButtonMotionFcn',@get_cur_positon); 其中第二项是判断鼠标移动的属性参数,第三项为回调函数 et. main.m clear;clc;s ...

  3. QQ面向对象设计

          通讯项目--仿QQ聊天程序   详细设计说明书                                                         一.引言 此项目为验证Jav ...

  4. 实际例子描述和分析&OpenCurlyDoubleQuote;猎豹抢票跨站推荐功能有票刷不到”的疑似bug

    前言 快过年了,又到了一年抢票时.今年douba和douma计划要带着doudou回姥姥家.昨天在家用抢票软件居然发现了一个bug,那就是在猎豹抢票中跨站推荐的车票几天里一直是没有,但是在12306手 ...

  5. 为何与0xff进行与运算

    为何与0xff进行与运算 在剖析该问题前请看如下代码 public static String bytes2HexString(byte[] b) { String ret = "&quot ...

  6. &lbrack;luogu P2184&rsqb; 贪婪大陆 &lbrack;树状数组&rsqb;&lbrack;线段树&rsqb;

    题目背景 面对蚂蚁们的疯狂进攻,小FF的Tower defence宣告失败……人类被蚂蚁们逼到了Greed Island上的一个海湾.现在,小FF的后方是一望无际的大海, 前方是变异了的超级蚂蚁. 小 ...

  7. Java — CommonUtil

    一些Java的公用方法: 1:获取当前时间 2:判断当前时间是否在时间date2之前3:比较时间大小4:获取某个时间的前n个小时5:返回某个字符串时间的Calendar对象6:判断两个时间段是否有重叠 ...

  8. php 数值数组

    <?php $cars=array("Volvo","BMW","Toyota"); echo ] . ] . ] . ". ...

  9. python模块之openpyxl扩展

    主要是对openpyxl扩展进行扩展,使用归类等 1. 安装 pip install openpyxl 想要在文件中插入图片文件,需要安装pillow,安装文件:PIL-fork-1.1.7.win- ...

  10. 【Spark】SparkContext源代码解读

    SparkContext的初始化 SparkContext是应用启动时创建的Spark上下文对象,是进行Spark应用开发的主要接口,是Spark上层应用与底层实现的中转站(SparkContext负 ...

相关文章