iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >javascript如何封装Date日期类
  • 665
分享到

javascript如何封装Date日期类

2024-04-02 19:04:59 665人浏览 八月长安
摘要

这篇文章主要为大家展示了“javascript如何封装Date日期类”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript如何封装Date日期类”这

这篇文章主要为大家展示了“javascript如何封装Date日期类”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript如何封装Date日期类”这篇文章吧。

javascript-封装Date日期类

  (一)对日期进行格式化

  自定义Date日期类的fORMat()格式化方法

    方式一:(非原创)  

// 对Date的扩展,将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(H)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, 
// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
// 例子: 
// (new Date()).Format("yyyy-MM-dd HH:mm:ss.S") ==> 2016-09-19 16:32:53.731
// (new Date()).Format("yyyy-M-d H:m:s:S")   ==> 2016-9-19 16:40:9:955 
Date.prototype.Format = function (fmt) { //author: meizz 
  var o = {
    "M+": this.getMonth() + 1, //月份 
    "d+": this.getDate(), //日 
    "H+": this.getHours(), //小时 
    "m+": this.getMinutes(), //分 
    "s+": this.getSeconds(), //秒 
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
    "S": this.getMilliseconds() //毫秒 
  };
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  for (var k in o)
  if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  return fmt;
};

    测试

window.onload=function() {
  var date = new Date();
  var b = date.toLocaleDateString();//获取的格式为:2016年9月19日
  var d = date.toLocaleTimeString();//下午4:42:46
  var e = date.toLocaleString();//2016年9月19日 下午4:44:02
  var f = date.toDateString();//Mon Sep 19 2016
  var g = date.toUTCString();//Mon, 19 Sep 2016 08:45:42 GMT
  var h = date.toString();//Mon Sep 19 2016 16:46:23 GMT+0800 (中国标准时间)
  //自定义日期格式
  var c = date.Format("yyyy-MM-dd HH:mm:ss");//format()方法是自定义的
  document.getElementById("aa").value = c;
};

  (二)根据日期返回本周周一和周日的日期


function getWeekDate(day,num) {
  
  num = num || 0;
  // 返回值:周一和周日所在的日期
  var oneWeek = {};
  // 初始日期
  var initDate = "";
  // 截取年月日
  initDate = day.split(' ')[0];
  // ie兼容性问题,将yyyy-MM-dd转换成yyyy/MM/dd
  initDate = initDate.replace(/-/g,"/");
  // 将string转换成Date
  initDate = new Date(Date.parse(initDate));//格式只能是yyyy/MM/dd
  
  // 返回 day距离1970 年 1 月 1 日0时0分的毫秒数
  var nowTime = initDate.getTime(); 
  // 返回星期的某一天的数字: 0(周日) 到 6(周六)
  var weekNum = initDate.getDay();
  // 一天所代表的毫秒数
  var oneDayTime = 24 * 60 * 60 * 1000; 
  
  //显示周一
  var MondayTime = nowTime - (weekNum - 1) * oneDayTime ; 
  //显示周日
  var SundayTime = nowTime + (7 - weekNum) * oneDayTime ; 
  if (0 != num) {
    MondayTime += 7 * num * oneDayTime;
    SundayTime += 7 * num * oneDayTime;
  }
  
  //初始化日期时间
  var monday = new Date(MondayTime);
  var sunday = new Date(SundayTime);
  // formatDate是自定义的格式化方法
  monday = monday.formatDate('yyyy-MM-dd');
  sunday = sunday.formatDate('yyyy-MM-dd');
  
  oneWeek.Monday = monday;
  oneWeek.Sunday = sunday;
  
  return oneWeek;
}

 测试:

var week = getWeekDate('2017-05-27',0);    
console.log(week.Monday + "," + week.Sunday);

 注意:

   Date.parse()具有兼容性问题,低版本IE浏览器不支持"yyyy-MM-dd"转换成Date,只支持"yyyy/MM/dd"转换成日期。

以上是“javascript如何封装Date日期类”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网html频道!

--结束END--

本文标题: javascript如何封装Date日期类

本文链接: https://www.lsjlt.com/news/73275.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • javascript如何封装Date日期类
    这篇文章主要为大家展示了“javascript如何封装Date日期类”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript如何封装Date日期类”这...
    99+
    2022-10-19
  • Java日期工具类的封装详解
    概述 在日常的开发中,我们难免会对日期格式化,对日期进行计算,对日期进行校验,为了避免重复写这些琐碎的逻辑,我这里封装了一个日期工具类,方便以后使用,直接复制代码到项目中即可使用。 ...
    99+
    2022-11-13
    Java日期工具类 Java日期类
  • JS如何对日期操作封装
    这篇文章主要介绍了JS如何对日期操作封装,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。格式化日期: Date.prototype.Forma...
    99+
    2022-10-19
  • java8日期工具类封装的实战记录
    目录前言在Java 8中如何处理日期和时间再封装Java8新增的日期、时间包总结前言 java现在应该是更新到16了,想想我当年刚参加工作的时候。普遍还都是java7,那时候没有Sp...
    99+
    2022-11-12
  • vant4如何封装日期段选择器
    本篇内容介绍了“vant4如何封装日期段选择器”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!TimeRangePickerTypes.tsi...
    99+
    2023-07-05
  • PHP中如何使用date()日期函数
    这篇文章给大家介绍PHP中如何使用date()日期函数,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1,年-月-日echo date('Y-m-j');  2007-02-...
    99+
    2023-06-17
  • javascript常用工具类如何封装
    小编给大家分享一下javascript常用工具类如何封装,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前言因为工作中经常用到这些...
    99+
    2022-10-19
  • java封装类是如何封装的
    在Java中,封装是一种面向对象编程的概念,用于隐藏内部实现细节,并通过公共方法提供对数据的访问和操作。封装类是为了封装基本数据类型...
    99+
    2023-10-23
    java
  • java如何封装类
    第一步我们首先需要了解java中的封装指的是什么,封装是一种将抽象性接口的实现细节都包装和隐藏起来的方法,它具有减少耦合,类内部结构可以修改,成员变量精准控制的优点,如下图所示: (...
    99+
    2014-05-30
    java教程 java
  • javascript如何求日期差
    这篇文章主要介绍“javascript如何求日期差”,在日常操作中,相信很多人在javascript如何求日期差问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”javascri...
    99+
    2022-10-19
  • javascript如何获取日期
    这篇文章主要介绍javascript如何获取日期,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!javascript获取日期的方法:1、使用【getTime()】方法;2、使用【getFullYear()】方法;3、使...
    99+
    2023-06-14
  • 如何封装vue日历组件
    这篇文章将为大家详细讲解有关如何封装vue日历组件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下图示封装的组件的代码如下<template>  <div&...
    99+
    2023-06-29
  • javascript如何只获取日期
    这篇文章主要介绍“javascript如何只获取日期”,在日常操作中,相信很多人在javascript如何只获取日期问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”javasc...
    99+
    2022-10-19
  • javascript如何实现指定日期返回上月日期
    这篇文章给大家分享的是有关javascript如何实现指定日期返回上月日期的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体如下:在项目开发中,使用javascript对日期进行...
    99+
    2022-10-19
  • javascript如何将日期转数字
    这篇“javascript如何将日期转数字”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“javascript如何将日期转数字...
    99+
    2023-07-05
  • Angular指令如何封装jQuery日期时间插件datetimepicker实现双向绑定
    这篇文章给大家分享的是有关Angular指令如何封装jQuery日期时间插件datetimepicker实现双向绑定的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。00.混乱的前端...
    99+
    2022-10-19
  • PostgreSQL中如何使用日期类型
    PostgreSQL中如何使用日期类型,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。当前时间/日期/时间戳获取当前时间的方式有...
    99+
    2022-10-18
  • JavaScript中如何获取当前日期
    本篇文章为大家展示了JavaScript中如何获取当前日期,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。function showDate()  {     ...
    99+
    2023-06-03
  • JavaScript中如何比较两个日期
    这篇文章给大家分享的是有关js中如何比较两个日期的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript的特点1.JavaScript主要用来向HTML页面添加交互行为。2.JavaScript可以直接...
    99+
    2023-06-14
  • JavaScript如何判断是不是日期
    这篇文章主要介绍“JavaScript如何判断是不是日期”,在日常操作中,相信很多人在JavaScript如何判断是不是日期问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Ja...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作