首页 > 其他分享 >轻量化时间插件moment.js的基本使用

轻量化时间插件moment.js的基本使用

时间:2022-08-22 23:25:01浏览次数:150  
标签:updateTime 插件 timer js moment null

轻量化时间插件moment.js的基本使用

npm install moment

基本调用方式

  1. js中调用moment
    let nowTime = moment() //获取当前的时间和日期

  2. 格式化展示
    moment().format() //将当前事件按照指定格式展示,请阅读文档

  3. 自定义更改现有的语言环境(此插件默认国外时间格式)

moment.updateLocale('zh-cn',{
    weekdays: '周日_周一_周二_周三_周四_周五_周六'.split('_')    
})

Vue里最基本的展示时钟

  data() {
    return {
      date:'',  // 事件
      timer:null  // 定时器ID
    };
  },
  mounted() {
    moment.locale('zh-cn', {
      weekdays: '周日_周一_周二_周三_周四_周五_周六'.split('_')
    })
    this.updateTime()
  },
  beforeDestroy() {
    clearTimeout(this.timer)
    this.timer = null
  },
  methods: {
    // 更新时间
    updateTime(){
      const that = this
      that.date = moment().format('YYYY-MM-DD dddd kk:mm')
      if (that.timer) {
        clearTimeout(that.timer)
        that.timer=null
      }
      that.timer = setTimeout(() => {
        that.updateTime()
      }, 10000);
    }
  }

标签:updateTime,插件,timer,js,moment,null
From: https://www.cnblogs.com/wanglei1900/p/16614615.html

相关文章

  • js获取url上的参数
    //根据传递过来的参数name获取对应的值//name是要获取url的参数名functiongetParameter(name){varreg=newRegExp("(^|&)"+name+"=([^&]*)(&|$)","i");......
  • [Node.js] mongoose schema
    Example1:importmongoosefrom'mongoose'constitemSchema=newmongoose.Schema({name:{type:String,required:true,trim:true,......
  • 使用clipboard.js复制文字+图片到微信后图片不显示问题处理
    使用clipboard.js复制文字+图片,粘贴到微信不显示图片,而QQ可以。解决方案:图片链接使用http,不要使用https。 使用clipboard.js实现复制功能文字+图片到微信客户端输入......
  • 使用JS实现全站302跳转
    https://zhidao.baidu.com/question/653679123211700645.htmlJS实现跳转第一种:代码如下:123<script language="javascript"type="text/javascript"> wi......
  • Vue3+Vite+Vant报错Uncaught SyntaxError: The requested module '/node_modules/.vit
    原因在开发过程中Vue3的依赖版本有变更,直接使用的npminstall下载新的版本,会导致node_modules下存在旧版本的缓存,从而影响了本地项目的启动编译。解决方案删除项目的......
  • JS判断是手机访问还是电脑访问,并自动跳转 可在PHP中使用 (2014-12-02 14:41:26)
    方法一、在head内调用以下代码《uaredirect.js》该文件下载地址:http://siteapp.baidu.com/static/webappservice/uaredirect.js百度网盘下载地址:http://pan.baidu.com/......
  • vue 无限滚动插件
    在线演示:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-otherscnpminstallvue-seamless-scroll--save引入importvueSeamless......
  • js实现 find 函数
    //arr:要查找的数组,predict:要查找的key字符串或[key,value]数组,或对象{key,value},fromIndex:要从数组中第一个元素开始查,默认为0functionfind(arr,predict,......
  • idea集成maven插件和使用骨架创建maven的java工程
    idea集成maven插件     关闭设置界面   使用骨架创建maven的java工程     ......
  • Json详解
    Json介绍我们在开发基于网络的程序时,经常会使用到JSON。相比xml这种数据交换格式来说,json相对解析更加简单一些,因此客户端和服务器的数据交换格式往往通过json进行交换。......