倒计时（jQuery）
倒计时，在网页制作中会经常用到，特别是一些节日活动页面运用更是广泛。今天就和大家分享一下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）的更多相关文章
- jQuery倒计时插件
倒计时jQuery插件 引言 最近又换工作了,还不错,我换工作的次数其实有点频繁,2014年7月份毕业,到现在工作已经换了3份了,工资跟刚毕业时候相比也涨了点儿,最近一次换工作我离开了深圳,来到了北京 ...
- jQuery实现的手机发送验证码倒计时效果代码分享
这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...
- jQuery中$(function() {});问题详解
$(function() {});是$(document).ready(function(){ })的简写,最早接触的时候也说$(document).ready(function(){ })这个函数是 ...
- jquery资源
一.时间日期: 倒计时jQuery插件 Countdown :http://code.google.com/p/jquery-countdown/ 使用案例:http://www.tieyou.com ...
- CSS3动画制作的简单示例
CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...
- web前端网页特效大全导航列表
CSS3和Html5 图表与图形 表单验证 导航菜单 table选项卡 视频播放器 日期和时间 返回顶部 图层代码 滚动代码 幻灯片 文字特效 图片放大镜 juqery焦点图 瀑布流 广告悬浮代码 在 ...
- js+CSS实现模拟华丽的select控件下拉菜单效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery获取短信验证码+倒计时实现
jQuery 短信验证码倒计时 <script type="text/javascript" charset="utf-8"> $(function ...
- jQuery简单倒计时插件
一. 效果预览 二. 实现 1. 按照特定的类结构布局. 2. 需要先引入jQuery,再引入此文件. /** * Author: CC11001100 * * 简单倒计时 * * 1. 支持页面内同 ...
- 倒计时的js实现 倒计时 js Jquery
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...
随机推荐
- 1-13 代理ARP和RARP
一.代理ARP(Proxy ARP) 因为路由器有阻住广播的作用,如果我们要访问一台远端的主机,那么我们封装的并不是远端的目的MAC地址,而是我们网关的MAC地址. 当我们的网关出现故障,就需要给他重 ...
- VB.NET TextBox 只允许输入1-100之间的整数 简洁篇
Dim Str As String = "" Private Sub txtRecond_KeyUp(sender As System.Object, e As System.Wi ...
- Java学习基础2
运算符: ++: int a = 4; int b = a++; ++在后:先运算在递增1 输出:a=5 b=4; int b = ++a; ++在前:先递增1,再运算 输 ...
- cell嵌套UIWebView遇到的几个问题
一.防止死循环问题 方法一:使用动画块 [self.myTableView beginUpdates];[self.myTableView endUpdates]; 在下面的代 ...
- Android菜鸟成长记14 -- AsnyTask
本篇随笔将讲解一下Android的多线程的知识,以及如何通过AsyncTask机制来实现线程之间的通信. 一.Android当中的多线程 在Android当中,当一个应用程序的组件启动的时候,并且没有 ...
- 关于localstorage的几个测试
1.如果在同一主域名下,localstorage能访问吗? 测试: 在www\index.php 中写入 localstorage 在www\wex5fortp\ui 目录下能否读到?? 结论:可以得 ...
- 双系统下（Ubuntu + win7）windows 无法连接无线网络
双系统下(Ubuntu + win7)windows 无法连接无线网络 今天开机登录win7,突然发现无法使用无线网络(WiFi信号标志有个大红叉),于是查看设备驱动,一切正常,这就奇怪了:用Wind ...
- CURLcode curl_easy_setopt（原创）
中文翻译: curl_easy_setopt() libcurl 手册 curl_easy_setopt() 名称 curl_easy_setopt -curl的设置选项 概要 #include &l ...
- 未能加载文件或程序集EntityFramework, Version=6.0.0.0解决办法
其他信息: 未能加载文件或程序集"EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934 ...
- js-url打开方式
引用自 : 老张的博客 *.location.href 用法: top.location.href="url" 在顶层页面打开url(跳出框架) self.loc ...