js 简单倒计时插件和使用方法

// 倒计时插件
(function (){
function countdown(config){
var startDate = config.start ? new Date(config.start) : new Date();
var endDate = new Date(config.end);
var id = config.id || ‘countdown‘;

var time = (endDate - startDate)/1000;

if(time < 0){
if(config.callback){
config.callback();
}
return;
}

var day = parseInt(time/86400, 10);
var hour = parseInt(time%86400/60/60, 10);
var minute = parseInt(time%86400%3600/60, 10);
var second = parseInt(time%86400%3600%60, 10);
var mayday = day > 0?day+‘天‘:‘‘;
var mayhour = hour<10?‘0‘+hour:hour;
var mayminute = minute<10?‘0‘+minute : minute;
var maysecond = second<10?‘0‘+second : second;
setTimeout(function (){
document.getElementById(id).innerHTML = mayday+mayhour+‘:‘+mayminute+‘:‘+maysecond;
countdown(config);
}, 1000);
}

window.countdown = countdown;
})();
// 引用倒计时
countdown({
‘end‘:‘2016/6/6 19:19:00‘,
‘callback‘:function () {
// document.getElementById(‘countdown‘).innerHTML = ‘the end!‘;
$(‘.login_award_time‘).remove();
}
});

时间: 2024-10-11 07:33:17

js 简单倒计时插件和使用方法的相关文章

jQuery简单倒计时插件

1. 按照特定的类结构布局. 2. 需要先引入jQuery,再引入此文件. /** * 简单倒计时 * * 支持页面内同时存在多个计时器并且不互相干扰 * * Usage: * * <div class="timer-simple-seconds" timer="3600"> * <span class="hour">hour</span>小时<span class="minute"&

JS简单的倒计时(代码优化)

倒计时网上一大堆,所以也没有什么好说的,支持:1.年,月,日,天,时分秒等倒计时. JS代码如下: /* * js简单的倒计时 * @param {date,obj} 日期 对象格式 */ function CountDown(date,obj) { var self = this; self.date = date; self.obj = obj; self._init(); }; $.extend(CountDown.prototype,{ _init: function(){ var se

【分享】JS图片滑动渐显渐隐插件-附使用方法。

前阵子总监要说做一个邀请函 效果 点击这里 鼠标拖拽进行浏览 它用的是Adobe edge软件生成的,代码量过大,冗余太多. 再加上我也没学过这个软件怎么使用,增加学习成本影响项目进度. 于是就自己写了个简单的.鼠标移动到右下角窗口滚动看效果→DEMO 不过是单体的 没有使用多个图片分频运动 ,当然如果项目需要的话,改起来也不费劲,比上面的要简单许多. 使用方法在下方: #bg{ position:fixed; width: 100%; height: 200%; background: url

js简单时分秒倒计时

最近做浏览器界面倒计时,用js就实现,两种方式: 一:设置时长,进行倒计时.比如考试时间等等 代码如下: 1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>简单时长倒计时</title> 5 <SCRIPT type="text/javascript"> 6 var maxtime = 60 * 60; //一个小时,按秒计算,自己调整! 7

【js插件进阶】JS中的call()和apply()方法详解

JS中的call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象. 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj. apply方法: 语法:apply(

js实现倒计时60秒的简单代码(推荐)

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js实现倒计时60秒的简单代码(推荐)</title> <script type="text/javascript"

一个简单的js实现倒计时函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <head> <met

Javascript教程:js异步编程的4种方法详述(转载)

文章收集转载于(阮一峰的网络日志) 你可能知道,Javascript语言的执行环境是“单线程”(single thread). 所谓“单线程”,就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推. 这种模式的好处是实现起来比较简单,执行环境相对单纯:坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方

【treeview】 基于jQuery的简单树形插件

[treeview] 效果图: 前几天想把后台的目录结构通过树形插件的方法反映到前端来,在网上搜了半天只找到了这个treeview,虽然不是很好看,不过还是够用的..用treeview的前提是要有jquery.treeview.js.jquery.treeview.css以及一些静态文件.这些可以通过网上去下载jquery-treeview这个包,解压缩后放到我们自己的项目下合适的目录即可.要注意必须把整个目录都拷贝过去,因为里面还有很多treeview要用的静态图片等等.然后在我们的HTML页