倒计时（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 一.如火如荼的团 ...
随机推荐
- eclipse:不能在tomcat里添加一个项目的解决方法
Cannot add a project to a tomcat server in eclipse You didn't create your project as "Dynamic W ...
- cf 733f
给你很多条边,每条边有一个初始边权w1,然后还有一个值表示把这个边权减一的代价w2,然后给你一个预算budget,然后让你输出怎么选边之后构成的树的边权和最小(在用budget减少了边权之后),输出你 ...
- Android Dex文件格式(一)
dex是Android平台上(Dalvik虚拟机)的可执行文件, 相当于Windows平台中的exe文件, 每个Apk安装包中都有dex文件, 里面包含了该app的所有源码, 通过反编译工具可以获取到 ...
- jQuery小节
jQuery 语法 jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery 元 ...
- CentOS6.5 vsftpd 配置
CentOS6.5vsftpd 配置文件为/etc/vsftpd/vsftpd.conf 安装完软件后:1.默认匿名用户能够登陆,且限制在/pub目录内,2.本地用户可以登陆但因SElinux而无法登 ...
- Huffman编码
#define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <cstdio> #include <cstri ...
- 网站fail_over测试（障害测试）
确认Web和DB进行操作: 一:确认web: ①确认进程是否存在: ps aux|grep tomcat ②关闭tomcat: /etc/init.d/catalina_sbi stop ③重启tom ...
- qt5中QPrinter的使用兼容性问题
qt5与qt4在QPrinter中使用的不同点如下: 在.pro文件中加入如下语句:
- 制作Nine-Patch图片的流程
1.找到draw9patch.bat文件,在Android sdk目录下的tools文件夹中. 2.双击打开draw9patch.bat文件,在导航栏点击File->Open 9-patch将图 ...
- memcached 分布式
memcached定义 memcached 是一套分布式的高速缓存系统,被广泛应用于应用系统的缓存层来提升应用程序的访问速度:memcache缺乏认证以及安全管制,这表明应将memcached服务器放 ...