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.url location.href区别总结
May 10 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
javascript 闭包
Sep 15 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
js的2种继承方式详解
Mar 04 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 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 结果集的分页实现代码
2009/03/10 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP常用的三种设计模式
2017/02/17 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
accesskey 提交
2006/06/26 Javascript
$()JS小技巧
2007/07/21 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
用Python实现协同过滤的教程
2015/04/08 Python
python超简单解决约瑟夫环问题
2015/05/12 Python
python数据结构之链表的实例讲解
2017/07/25 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS