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 相关文章推荐
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
layUI实现列表查询功能
Jul 27 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 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递归列出所有文件和目录的代码
2008/09/10 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
python3爬虫之设计签名小程序
2018/06/19 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
如何用python写个模板引擎
2021/01/14 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
大课间活动实施方案
2014/03/06 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
浅谈MySQL函数
2021/10/05 MySQL
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫