jquery时间倒计时
代码:
js:
function countDown(time, id) { //time的格式yyyy/MM/dd hh:mm:ss
var day_elem = $(id).find('.day');
var hour_elem = $(id).find('.hour');
var minute_elem = $(id).find('.minute');
var second_elem = $(id).find('.second');
var end_time = new Date(time).getTime(), //月份是实际月份-1
sys_second = (end_time - new Date().getTime()) / 1000;
var timer = setInterval(function () {
if (sys_second > 1) {
sys_second -= 1;
var day = Math.floor((sys_second / 3600) / 24);
var hour = Math.floor((sys_second / 3600) % 24);
var minute = Math.floor((sys_second / 60) % 60);
var second = Math.floor(sys_second % 60);
day_elem && $(day_elem).text(day); //计算天
$(hour_elem).text(hour < 10 ? "0" + hour : hour); //计算小时
$(minute_elem).text(minute < 10 ? "0" + minute : minute); //计算分钟
$(second_elem).text(second < 10 ? "0" + second : second); //计算秒杀
} else {
clearInterval(timer);
}
}, 1000);
}
html:
<p id="colockbox">
<span class="day" id="day">00</span>
<span class="hour">00</span>:
<span class="minute">24</span>:
<span class="second">24</span>
</p>
jquery时间倒计时的更多相关文章
- js时间倒计时
看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...
- jQuery实现倒计时效果-杨秀徐
本实例效果:剩余368天22小时39分57秒结束 代码简单易懂,适用各种倒计时: <!DOCTYPE html> <head> <title>jQuery实现倒计时 ...
- jquery.countdown 倒计时插件的学习
1.第一种简单的使用 第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...
- jquery实现倒计时
<html> <head> <meta charset="utf-8"/> <title>jquery实现倒计时</title ...
- jQuery控制倒计时
1.1 秒杀的倒计时 做秒杀网页总免不了倒计时,但没有很好的服务器,啥资源都没有,只能将部分任务交给浏览器去处理,比如秒杀首页的倒计时,因为真正秒杀是在具体页面,首页只是展示而已,所以误差一点是允许的 ...
- jquery时间轴幻灯展示源代码
查看效果:http://hovertree.com/texiao/jquery/75/ 源代码下载:http://hovertree.com/h/bjaf/8jlpc2wu.htm 效果图如下: 代码 ...
- jQuery时间格式插件-moment.js的使用
jQuery时间格式插件-moment.js的使用 moment.js插件的使用,使用之前在页面引入对应的js文件: 详细的操作可见moment中文官网:http://momentjs.cn/ 日期格 ...
- jQuery时间轴插件timeline.js
http://www.jq22.com/jquery-info13695 http://www.jq22.com/jquery-info13357 简要教程 timeline.js是一款jQuery时 ...
- 发展简史jQuery时间轴特效
发展简史jQuery时间轴特效.这是一款鼠标滚动到一定的高度动画显示企业发展时间轴特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="wr ...
随机推荐
- 极客DIY:使用树莓派制作一套“NAS+私有云盘+下载机”
原创作者:HackLiu 0×00 前言 如果你家里有多台设备需要联网需要娱乐,你一定会或多或少遇到设备碎片化带来的烦恼.当然,已经有很多厂商包括新晋的小米.360在内的互联网公司做了这个事情 ...
- Python全栈--9 __import__ 反射和面向对象基础 self 封装 继承(多继承的顺序) 多态
一.反射 python中的反射功能是由以下四个内置函数提供:hasattr.getattr.setattr.delattr,改四个函数分别用于对对象内部执行:检查是否含有某成员.获取成员.设置成员.删 ...
- node.js 基础学习笔记3 -http
http模块,其中封装了一个高效的HTTP服务器和一个建议的HTTP客户端 http.server是一个基于事件的HTTP服务器 http.request则是一个HTTP客户端工具,用户向服务器发送请 ...
- 《CSS3秘籍》(第三版)-读书笔记(3)
第9章 装饰网站导航 1. 选择要定义样式的链接 大部分浏览器都支持4种基本的链接状态:未访问的链接.已访问的链接.访问者的鼠标正悬停在上方的链接,以及正被单击的链接.CSS提供了与这些状态对应的4 ...
- npoi实现 从固定的行读取数据作为表头并返回datable
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
- each处理json数据
eg:给传进来的ID中当其对应的值为true时,即给对应的ID标签添加一个class 名为 focus,如: var obj = { id01:'true', id02:'flase', id03: ...
- [linux]linux普通用户安装rpm软件
先下载rpm文件 yumdownloader xxxx.rpm 直接wget等其他方式下载也可以. 解压 rpm2cpio xxxx.rpm |cpio -idvm 修改环境变量 将新增的软件的可执行 ...
- [php-src]窥探Php内核中的变量
内容均以php-5.6.14为例. 在看各种组合数据类型之前,有必要先熟悉下 Zend/zend_types.h 里面的自定义数据类型. #ifndef ZEND_TYPES_H // 防止多次 in ...
- Int16, Int32, Int64 范围
Int16, 等于short, 占2个字节. -32768 32767 Int32, 等于int, 占4个字节. -2147483648 2147483647 Int64, 等于long, 占8个字节 ...
- [学习笔记] 七步从AngularJS菜鸟到专家(4和5):指令和表达式 [转]
这一篇包含了"AngularJS - 七步从菜鸟到专家"系列的第四篇(指令)和第五篇(表达式). 之前的几篇展示了我们应用的核心组件,以及如何设置搭建一个Angular.js应用.在这一部分,我们会厘 ...