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 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 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实现更新中间关联表数据的两种方法
2014/09/01 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
python删除列表内容
2015/08/04 Python
python操作 hbase 数据的方法
2016/12/18 Python
详解python之配置日志的几种方式
2017/05/22 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
社区文明倡议书
2015/04/28 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
2019年大学推荐信
2019/06/24 职场文书
Python List remove()实例用法详解
2021/08/02 Python
Redis分布式锁Redlock的实现
2021/08/07 Redis
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL