首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js常用方法和一些封装 -- 时间相关(附案例详解)

/-/ig,"/").replace("T"," ")); }else{ return date; } } 勘误:_center()方法中timeBox应改为dom,封装方法的时候忘了改过来了...本文介绍一些时间操作相关的方法,经过思考,从这一篇开始,主要围绕一个例子开始讲,先通过案例来讲解一下基本的操作。然后上干货 -- 也就是各种封装好的方法,都是可以直接使用的。...如有讲得不对的地方,恳请各位大神指正,欢迎评论和吐槽。 好了,现在开始展示案例: ?...我们用js的方式来实现: //让元素居中的方法 function _center(dom){ dom.style.position = 'absolute'; dom.style.top...Paste_Image.png 我们希望拿到hh:mm:ss格式的时间数据,而js原生态的date对象没有format方法,所以先通过下面的代码扩展一下: Date.prototype.format =

1.8K81
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS-cookie封装

    oDate.setDate(oDate.getDate()+iDay);//设置延期日 document.cookie = name+'='+value+';expires='+oDate;//到这里的oDate...是延期后的时间毫秒数 setCookie('xxx','www',3)//调用传参,前俩参数记得加‘单引号’ getCookie()中: getCookie:传一个参数,就是要查找记录的name值,讲现有的...cookie字符串进行切割扔个arr,此时的arr就是{name=1,name2=2,name3=3...}的一个object,就像一个json,此时,再遍历,将arr的每一个元素分别提取出来然后通过等号切割...,扔个arr2,这样,arr2就成了俩值得数组,遍历一遍,就被扔进来一对,把扔进来的这对进行判断,如果他的名字等于传进来的要查找的参数值,那么arr2内部的第2个数值就是要找的名字对应值,把他弹出来。...否则,遍历完了还没有,就弹回空或者其他的“没找到”等提示语。 removeCookie()中: 有效期时间设置为-1,让计算机以为这条数据是昨天过期,自己删除本条数据。 ?这里第二个参数为什么是1

    8.2K51

    JS高级-数据结构的封装

    带着这个美好的愿望,开始学习吧O(∩_∩)O~~ 我们知道在JS中,常常用来组织数据的无非是数组和对象(这些基础就不介绍了)。...当然这些数据类型,原生JS不支持,那么就需要通过封装来模拟,其底层还是数组和对象(被看穿喽~),接下来我们挨个来解析吧 一、列表 定义:列表是一组有序的数据,每个列表中的数据项称为元素。..._dataStore;}//返回列表的字符串形式 } 列表与数组比较类似,只是简单的对数组做了二次封装,用案例来展示一下列表的使用场景,进一步加深理解。..._top;}//获取列表的中元素的个数 } 相对列表来说,栈的方法不多显得很简洁,同样来几个案例,帮助理解栈的使用场景 案例一:回文 function isPalindrome(word){ var...JS中对象就是以字典的形式设计的,但字典的基础是数组,而不是对象。这样可以进行排序,况且JS中一切皆对象,数组也不例外。

    7.9K70

    基于发布-订阅的原生 JS 插件封装

    用原生 JS 封装一个动画插件。效果如下: ? 这个飞驰的小球看起来是不是特有灵性呢?没错,它就是用原生JS实现的。 接下来,就让我们深入细节,体会其中的奥秘。...一、需求分析 封装一个插件,将小球的 DOM 对象作为参数传入,使得小球在鼠标按下和放开后能够运动,在水平方向做匀减速直线运动,初速度为鼠标移开瞬间的速度,在竖直方向的运动类似于自由落体运动。...JS 代码,采用 ES6 语法 //drag.jsclass Drag { //ele为传入的DOM对象 constructor(ele) { //初始化参数...在这里我并不是简单讲讲效果的实现、贴贴代码就过去了,而是带你体验了封装插件的整个过程。有了发布-订阅的场景,理解这个设计思想就更加容易了。...回过头看,比如 DOM2 的事件池机制,vue 的生命周期钩子等等,你就会明白它们为什么要这么设计,原理上和这次封装没有区别,这样一想,很多东西就更加清楚了。

    3.1K20

    JS面向对象一:MVC的面向对象封装

    JS面向对象一:MVC的面向对象封装 MDNjavascript面向对象 面向对象(Object-Oriented) ? 面向对象里面向的意思是以...为主,面向对象编程既以对象为主的编程....类(从MVC提炼面向对象是什么) 使用的代码是 模块化、MVC里的V和C、闭包与立即执行函数的使用和MVC中的M(model)、MVC总结 接下来优化老版本的message.js 箭头函数内外this相通...那么我们可以吧每个js文件中的MVC写成一个模板,这个模板就是类 所谓模板,就是写个函数把他造出来,那么我们来封装MVC 封装 Model View Controller 首先建三个封装的文件,再引入...Model(): 原先的model: ? 封装后Model(): ? 并且save()传入object 然后就可以用封装后的Model()代码了,修改message.js代码为: ? ?...封装Controller.js,但是没有将封装运用,因为自己的简历项目比较小,代码结构不复杂,封装后反而会难理解,知道如何封装和如何使用的思想就可以 封装后的所有MVC代码 总结 密爱想对象封装后MVC

    2.7K20

    JS工厂模式_工厂模式进行封装

    如果多次调用这个函数,每次将返回一个新的对象,这就跟工厂的生产线一样。 简单工厂模式的优点在于:能解决多个相似的问题,减少大量冗余代码。...的sellCall方法时就会抛出异常。...CarChild继承自ComplexCarFactory,同时重写了父类的方法,CarChild类实例后的对象之间是相互独立的,具体的业务逻辑会放在子类中进行编写。...总结 工厂模式最重要的优点是:可以在父类实现一些相同的方法,而具体要实现的业务逻辑可以放在子类中,通过子类重写父类的方法,去实现自己的业务逻辑。...工厂模式弱化对象间的耦合,父类专注于实现重复性的功能,子类专注于具体的业务逻辑,这样可以减少冗余代码。

    85320
    领券