十月 2019 - SKILL.NULL

JS比较两个时间的时间差

/**

* 比较两个时间的时间差

* @param startTime 开始时间

* @param endTime 结束时间

* @demo compareTime(new Date('2019-12-24 16:02').getTime(), new Date().getTime())

function compareTime (startTime, endTime) {

var retValue = {}

var compareTime = endTime - startTime // 时间差的毫秒数

// 计算出相差天数

var days = Math.floor(compareTime / (24 * 3600 * 1000))

retValue.Days = days

// 计算出相差年数

var years = Math.floor(days / 365)

retValue.Years = years

// 计算出相差月数

var months = Math.floor(days / 30)

retValue.Months = months

// 计算出小时数

var leaveHours = compareTime % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数

var hours = Math.floor(leaveHours / (3600 * 1000))

retValue.Hours = hours

// 计算相差分钟数

var leaveMinutes = leaveHours % (3600 * 1000) // 计算小时数后剩余的毫秒数

var minutes = Math.floor(leaveMinutes / (60 * 1000))

retValue.Minutes = minutes

// 计算相差秒数

var leaveSeconds = leaveMinutes % (60 * 1000) // 计算分钟数后剩余的毫秒数

var seconds = Math.round(leaveSeconds / 1000)

retValue.Seconds = seconds

var resultSeconds = 0

if (years >= 1) {

resultSeconds = resultSeconds + years * 365 * 24 * 60 * 60

}

if (months >= 1) {

resultSeconds = resultSeconds + months * 30 * 24 * 60 * 60

}

if (days >= 1) {

resultSeconds = resultSeconds + days * 24 * 60 * 60

}

if (hours >= 1) {

resultSeconds = resultSeconds + hours * 60 * 60

}

if (minutes >= 1) {

resultSeconds = resultSeconds + minutes * 60

}

if (seconds >= 1) {

resultSeconds = resultSeconds + seconds

}

retValue.resultSeconds = resultSeconds

return retValue

}

2019-10-24by SKILLNULL JavaScript 阅读(3027)评论(0)

JS监听浏览器标签页的显示与隐藏

/**

* 监听浏览器标签页的显示与隐藏

class ListenerPageVisibility {

constructor () {

// 设置隐藏属性和改变可见属性的事件的名称

this.hidden = ''

this.visibilityChange = ''

if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support

this.hidden = "hidden"

this.visibilityChange = "visibilitychange"

} else if (typeof document.msHidden !== "undefined") {

this.hidden = "msHidden"

this.visibilityChange = "msvisibilitychange"

} else if (typeof document.webkitHidden !== "undefined") {

this.hidden = "webkitHidden"

this.visibilityChange = "webkitvisibilitychange"

}

this.handleChange = (callBackHidden, callBackVisibility) => {

if (document[this.hidden]) {

// 页面是隐藏状态

callBackHidden && callBackHidden()

} else {

// 页面是展示状态

callBackVisibility && callBackVisibility()

}

/**

* 全局访问点

* @param callBackHidden 页面隐藏执行的回调方法

* @param callBackVisibility 页面显示执行的回调方法

linsternVisibility (callBackHidden, callBackVisibility) {

// 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告

if (typeof document.addEventListener === "undefined" || typeof document[this.hidden] === "undefined") {

console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.")

} else {

// 处理页面可见属性的改变

document.addEventListener(this.visibilityChange, () => {

this.handleChange(callBackHidden, callBackVisibility)

}, false)

}

// 调用实例

let navChange = new ListenerPageVisibility()

navChange.linsternVisibility(

// 页面是隐藏状态执行方法

() => {

// TODO 浏览器标签页处于隐藏状态时,执行的方法

// 页面是可见状态执行方法

() => {

// TODO 浏览器标签页处于显示状态时,执行的方法

}

)

2019-10-21by SKILLNULL JavaScript 阅读(3133)评论(0)

JavaScript设计模式样例四 —— 单例模式

单例模式(Singleton Pattern)：

定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

目的：阻止其他对象实例化其自己的单例对象的副本，从而确保所有对象都访问唯一实例。

场景：如一个系统中可以存在多个打印任务，但是同时只能有一个正在工作的任务。

例：JS代码实现

// 惰性单例

let lazySingle = (() => {

let _instance = null

// 单例

Single = () => {

let privateAttribute = '我是私有属性'

privateMethod = () => {

// 私有方法

}

return {

publicMethod: () => {

// 对外暴露方法

publicAttribute: '我是对外暴露属性'

}

// 提供一个全局访问点

return () => {

if (!_instance) {

_instance = Single()

}

return _instance

}

})()

Github地址：https://github.com/skillnull/Design-M[……]

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(2759)评论(0)

一	二	三	四	五	六	日
« 9月				2月 »
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31