js实现日期显示的一些操作(实例讲解)


Posted in Javascript onJuly 27, 2017

1、js获取当前日期(yyyy-mm-dd)

以下代码是获取到的当前日期:

var myDate = new Date(); 
var year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
var month = myDate.getMonth()+1;  //获取当前月份(1-12)
var day = myDate.getDate();  //获取当前日(1-31)
//获取完整年月日
var newDay = year + “-” + month + “-” + day;

js实现日期显示的一些操作(实例讲解)

2、点击实现日期的天数加减(yyyy-mm-dd)

点击俩个按钮分别可以实现日期的加减,如果本月天数达到最多,那么月份将会自动增加或减少

var n = 0;
dayChange(0)
$("#time-add").click(function(){
 n++;
 dayChange(n);
})
$("#time-less").click(function(){
 n--;
 dayChange(n);
})
function dayChange(n){
 var now = new Date();//今天
 var tomo = new Date((now/1000+86400*n)*1000);//明天
 var month = tomo.getMonth() + 1;
 var strDate = tomo.getDate(); 
 var seperator1 = "-";
 if (month >= 1 && month <= 9) {
  month = "0" + month;
 }
 if (strDate >= 0 && strDate <= 9) {
  strDate = "0" + strDate;
 }
 var currentdate = tomo.getFullYear() + seperator1 + month + seperator1 + strDate;
 $(".center-day").html(currentdate);
}

js实现日期显示的一些操作(实例讲解)

3、获取当前本周周一和本周周日的时间范围

不管当前是周几,都可以获取到当前所在这一周的起始时间

var now = new Date();//今天
 week(now); 
 function week(now){
 var nowTime = now.getTime() ; 
 var day = now.getDay();
 var oneDayLong = 24*60*60*1000 ; 
 //获取本周所在周一
 var MondayTime = nowTime - (day-1)*oneDayLong ; 
 //获取本周所在周末     
 var SundayTime = nowTime + (7-day)*oneDayLong ; 
 //转化日期
 var monday = new Date(MondayTime);
 var sunday = new Date(SundayTime);
 var month = monday.getMonth() + 1;
 var strDate = monday.getDate();
 var month1 = sunday.getMonth() + 1;
 var strDate1 = sunday.getDate();
 if (month >= 1 && month <= 9) {
  month = "0" + month;
 }
 if (month1 >= 1 && month1 <= 9) {
  month1 = "0" + month1;
 }
 if (strDate >= 0 && strDate <= 9) {
  strDate = "0" + strDate;
 }
 if (strDate1 >= 0 && strDate1 <= 9) {
  strDate1 = "0" + strDate1;
 }
 currentdate = monday.getFullYear() + seperator1 + month + seperator1 + strDate + "至" + sunday.getFullYear() + seperator1 + month1 + seperator1 + strDate1;
 $(".center-day").html(currentdate);
32}

js实现日期显示的一些操作(实例讲解)

4、点击实现每周范围的变化

点击改变的按钮将会改变显示一周范围的改变,如果有的在下一月或者下一年,那么将会自动显示,不会出现错误

var now = new Date();//今天
var n = 0;
week(now); 
$("#week-add").click(function(){
 n++;
 var date = new Date(now.getTime() + n*7*24*3600*1000);
 week(date);
})
$("#week-add").click(function(){
 n--;
 var date = new Date(now.getTime() + n*7*24*3600*1000);
 week(date);
})
function week(now){
 var nowTime = now.getTime() ; 
 var day = now.getDay();
 var oneDayLong = 24*60*60*1000 ; 
//获取本周所在周一
 var MondayTime = nowTime - (day-1)*oneDayLong ; 
//获取本周所在周末     
 var SundayTime = nowTime + (7-day)*oneDayLong ; 
22//转化日期
 var monday = new Date(MondayTime);
 var sunday = new Date(SundayTime);
 var month = monday.getMonth() + 1;
 var strDate = monday.getDate();
 var month1 = sunday.getMonth() + 1;
 var strDate1 = sunday.getDate();
 if (month >= 1 && month <= 9) {
  month = "0" + month;
 }
 if (month1 >= 1 && month1 <= 9) {
  month1 = "0" + month1;
 }
 if (strDate >= 0 && strDate <= 9) {
  strDate = "0" + strDate;
 }
 if (strDate1 >= 0 && strDate1 <= 9) {
  strDate1 = "0" + strDate1;
 }
 currentdate = monday.getFullYear() + seperator1 + month + seperator1 + strDate + "至" + sunday.getFullYear() + seperator1 + month1 + seperator1 + strDate1;
 $(".center-day").html(currentdate);
}

js实现日期显示的一些操作(实例讲解)

5、获取当前月份的第一天和最后一天

能够获取到当前所在月份的第一天和最后一天,最后一天的日期是不固定的,能够获取到应有的日期

monthfen(0)
function monthfen(n){
var now = new Date();//今天

var firstDate = new Date((now/1000+86400*n*now.getDate())*1000);//明天
 //本月第一天

firstDate.setDate(1); //第一天

var date = new Date(firstDate);
  var month = date.getMonth() + 1;

var strDate = "0" + date.getDate();
 //本月最后一天
  var endDate = new Date(firstDate);
  endDate.setMonth(firstDate.getMonth()+1);
  endDate.setDate(0);

var date1 = new Date(endDate);
  var month1 = date1.getMonth() + 1;

var strDate1 = date1.getDate();

if (month >= 1 && month <= 9) {


month = "0" + month;

}

if (month1 >= 1 && month1 <= 9) {


month1 = "0" + month1;

}

currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + "至" + date1.getFullYear() + seperator1 + month1 + seperator1 + strDate1;

$(".center-day").html(currentdate);
}

js实现日期显示的一些操作(实例讲解)

6、点击实现当前月份的改变

点击按钮会实现当前月份的改变,那么最后一天的日期也会自动改变,

monthfen(0)
var n = 0;
$("#month-add").click(function(){
 n++;
 monthfen(n);
})
$("#month-less").click(function(){
 n--;
 monthfen(n);
})
function monthfen(n){
var now = new Date();//今天

var firstDate = new Date((now/1000+86400*n*now.getDate())*1000);//明天
//本月第一天

firstDate.setDate(1); //第一天

var date = new Date(firstDate);
  var month = date.getMonth() + 1;
  var strDate = "0" + date.getDate();
//本月最后一天

var endDate = new Date(firstDate);

endDate.setMonth(firstDate.getMonth()+1);

endDate.setDate(0);

var date1 = new Date(endDate);

var month1 = date1.getMonth() + 1;

var strDate1 = date1.getDate();

if (month >= 1 && month <= 9) {


month = "0" + month;

}

if (month1 >= 1 && month1 <= 9) {


month1 = "0" + month1;

}

currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + "至" + date1.getFullYear() + seperator1 + month1 + seperator1 + strDate1;

$(".center-day").html(currentdate);
}

js实现日期显示的一些操作(实例讲解)

当然还有很多关于日期格式的改变和算法,如果有什么不理解的可以留下评论,大家一起探讨。

以上这篇js实现日期显示的一些操作(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript获得选中文本内容的方法
Dec 02 Javascript
jQuery 使用手册(七)
Sep 23 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 #Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 #Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 #Javascript
前端主流框架vue学习笔记第二篇
Jul 26 #Javascript
浅谈vue.js中v-for循环渲染
Jul 26 #Javascript
前端主流框架vue学习笔记第一篇
Jul 26 #Javascript
关于vue.js组件数据流的问题
Jul 26 #Javascript
You might like
Terran兵种介绍
2020/03/14 星际争霸
php绘制圆形的方法
2015/01/24 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
PHP中Array相关函数简介
2016/07/03 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
JS实现放大镜效果
2020/09/21 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
python分割文件的常用方法
2014/11/01 Python
Python中的引用和拷贝浅析
2014/11/22 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
2015年小学总务工作总结
2015/07/21 职场文书
初中语文教学反思范文
2016/03/03 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python