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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
js对象的构造和继承实现代码
Dec 05 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
微信小程序动态添加view组件的实例代码
May 23 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
php实现给一张图片加上水印效果
2016/01/02 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
php 可变函数使用小结
2018/06/12 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
如何使用repr调试python程序
2020/02/28 Python
python实现udp传输图片功能
2020/03/20 Python
利用Python优雅的登录校园网
2020/10/21 Python
python 如何上传包到pypi
2020/12/24 Python
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
厉行勤俭节约倡议书
2014/05/16 职场文书
保护环境倡议书300字
2014/05/19 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书