倒计时（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 一.如火如荼的团 ...
随机推荐
- highchart 动态刷新（可用于制作股票时时走势）
最近项目中要求获取时时的cpu动态图,利用 highchart 可以轻松实现该功能,效果可在此地址查看:动态效果 代码如下: 页面 js 引用: <script src="你项目js的 ...
- 从零开始学 ios 的一些建议 摘自http://www.cocoachina.com/ios/20150826/13151.html
我是一只小菜鸟,今天在cocoaChina 看到一篇关于初学者,也就是零基础的童鞋的一些建议,感觉写的好好. 我觉得,学习真的是很累,但是,你要记得一句话,,世界上最最可怕的两个字是认真.共勉! 事情 ...
- 使用MLeaksFinder检测项目中的内存泄露
github地址:https://github.com/Zepo/MLeaksFinder MLeaksFinder使用简单方便,可以帮助你在开发时发现内存泄露你的iOS应用.它可以自动发现和UIVi ...
- html初学者笔记01
一.Html简介 HTML 是一种标记语言 忽略大小写,语法宽松 使用 HTML 标记和元素,可以: 控制页面和内容的外观 发布联机文档 使用 HTML 文档中插入的链接检索联机信息 创建联机表单,收 ...
- php的进制转换
学习了php的进制转换,有很多的知识点,逻辑,也有最原始的笔算,但是我们还是习惯使用代码来实现进制的转换,进制的转换代码有如下:二进制(bin)八进制( oct)十进制( dec)十六进制( hex) ...
- AWT布局管理器
布局管理器 容器内可以存放各种组件,而组件的位置和大小是由容器内的布局管理器来决定的.在AWT中为我们提供了以下5种布局管理器: ① FlowLayout 流式布局管理器 ② BorderLa ...
- KeepAlived主备/主主模型高可用Nginx
部署准备: 两台CentOS 7主机HA1和HA2 CentOS 7 基于rpm包安装Nginx: 由于Base源中没有Nginx,所以要安装EPEL源,命令如下: wget http://dl.fe ...
- LVS简单实现NAT&DR模型
LVS:Linux Virtual Server 一个由章文嵩博士发起的自由软件项目,它的官方站点是www.linuxvirtualserver.org. 现在LVS已经是Linux标准内核的一部分 ...
- Socket粘包问题
这两天看csdn有一些关于socket粘包,socket缓冲区设置的问题,发现自己不是很清楚,所以查资料了解记录一下: 一两个简单概念长连接与短连接:1.长连接 Client方与Server方先建立通 ...
- （转载）持续集成（第二版）[来自：Martin Fowler]
转载自:iTech的博客 持续集成(第二版) 作者:Martin Fowler 译者:雷镇 持续集成 是一种软件开发实践.在持续集成中,团队成员频繁集成他们的工作成果,一般每人每天至少集成一次,也可以 ...