js 写插件入门(倒计时插件)
阅读 (210) 2020-07-15 10:42:41
原生JS写插件,本例重点在于new Date的应用以及定时器setInterval函数
H5活动页中经常会要写一些活动的倒计时。
能实现倒计时功能的jquery插件有很多,本例有点重复造轮子,主要的意义在于不依赖别人写的东西,自己去实现倒计时这个功能,先从简单的开始,逐步写一些结合更多JS知识点的插件。
样例地址:https://returnc.com/demo/timedown.html
;(function(undefined) {
"use strict"
var _global
// 合并对象(深拷贝)
function extend(defaults, newData) {
var newData = newData || {};
for (var x in defaults) {
// 对于使用时,没有设置的参数;用默认参数代替
if (typeof newData[x] === 'undefined') {
newData[x] = defaults[x];
}
}
return newData
}
// 时间补零
function prefixInteger (num, n) {
return (Array(n).join(0) + num).slice(-n)
}
// 插件函数
function Timedown(opt){
// 未使用new关键词时
if (!(this instanceof Timedown)){
// 等于再new一个Timedown
return new Timedown(opt)
}
this._initial(opt);
}
Timedown.prototype = {
constructor: this,
_initial: function (opt) {
var defaults = {
id: 'timedown',
endTime: new Date().getTime(),
finishedDesc: '倒计时已结束'
}
// 没有设置的参数,使用默认值
this.opt = extend(defaults, opt) // 得到的this.opt, 在方法中调用;
var _this = this
var setTime = setInterval(function () {
// 结束时间的时间戳
var endTimestamp = new Date(this.opt.endTime).getTime()
// 当前时间的时间戳
var startTimestamp = new Date().getTime()
// 计算时间差,除1000是因为毫秒的精度换成秒
var timeDiff = parseInt((endTimestamp - startTimestamp) / 1000)
// 计算倒计时小时
var hoursLeft = parseInt(timeDiff / 60 / 60)
// 计算倒计时分
var minutesLeft = parseInt((timeDiff / 60) % 60)
// 计算倒计时秒
var secondsLeft = parseInt(timeDiff % 60)
// 获取待设置html的元素
var el = document.getElementById(_this.opt.id)
// 倒计时结束时清除计时器执行其它逻辑
if(timeDiff <= 0) {
clearInterval(setTime)
el.innerHTML = _this.opt.finishedDesc
} else {
el.innerHTML = prefixInteger(parseInt(hoursLeft), 2) + ':' + prefixInteger(parseInt(minutesLeft), 2) + ':' + prefixInteger(parseInt(secondsLeft), 2)
}
}, 1000)
}
}
// 最后将插件对象暴露给全局对象
_global = (function(){ return this || (0, eval)('this'); }());
if (typeof module !== "undefined" && module.exports) {
module.exports = Timedown;
} else if (typeof define === "function" && define.amd) {
define(function(){return Timedown;});
} else {
!('Timedown' in _global) && (_global.Timedown = Timedown);
}
}());
调用:
var opt = {
id: 'timedown',
endTime: '2020/07/15 18:00:00'
}
Timedown(opt);
更新于:2020-07-21 11:10:25