实例讲解js实现日期显示操作

发布时间：2020-03-17 09:43:50
作者：码农之家
点击：56

这篇文章主要知识点是关于js、日期显示、的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子书

JavaScript数据可视化编程扫描版

类型：js编程大小：61.8 MB格式：PDF作者：Stephen A.Thomas

立即下载

Tags：JS　

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

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实现日期显示的一些操作(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。

javascript 相关电子书

同构JavaScript应用开发 PDF 清晰中文版电子书

分类：JavaScript　作者：杰森·史特林贝尔（Jason Strim大小：10.4 MB

免费下载
JavaScript权威指南 PDF 超清第6版电子书

分类：JS指南　作者：DavidFlanagan,淘宝前端团队大小：22 MB

免费下载
学习JavaScript数据结构与算法 PDF 原书第3版电子书

分类：JavaScript　作者：洛伊安妮大小：13.6 MB

免费下载
看透JavaScript：原理、方法与实践 PDF 完整清晰版电子书

分类：JavaScript　作者：韩路彪大小：251 MB

免费下载
Head First JavaScript程序设计 PDF 中文高清版电子书

分类：JavaScript　作者：[美]埃里克·T.弗里曼大小：71.2 MB

免费下载
JavaScript从入门到精通 PDF 影印第2版电子书

分类：JavaScript　作者：明日科技大小：92.2 MB

免费下载
21天学通HTML+CSS+JavaScript Web开发 PDF 第7版电子书

分类：前端　作者：劳拉莱梅大小：104.9 MB

免费下载
JavaScript之美 PDF 完整版电子书

分类：JavaScript　作者：安顿?科瓦诺夫大小：94 MB

免费下载
JavaScript和jQuery实战手册 PDF 高清第3版电子书

分类：JavaScript　作者：大卫·索耶·麦克法兰德大小：103 MB

免费下载

学习笔记

网友NO.636161

纯JS实现出生日期[年月日]下拉菜单效果

在制作网页时，可能需要给用户提供注册帐号页面，用户注册设计很多信息，其中就有关于出生日期的，出于用户体验，不想让用户手动输入，而HTML5的date，目前很多浏览器支持的并不是很好，所以就可以用JS实现年、月、日3个下拉框的日期选择。具体代码如下： 1、新建一个js文件，如birthday.js; function DateSelector(selYear, selMonth, selDay) {//定义函数 this.selYear = selYear; this.selMonth = selMonth; this.selDay = selDay; this.selYear.Group = this; this.selMonth.Group = this;// 给年份、月份下拉菜单添加处理onchange事件的函数 if (window.document.all != null) // IE { this.selYear.attachEvent("onchange", DateSelector.Onchange); this.selMonth.attachEvent("onchange", DateSelector.Onchange); } else // Firefox { this.selYear.addEventListener("change", DateSelector.Onchange, false); this.selMonth.addEventListener("change", DateSelector.Onchange, false); } if (arguments.len……

网友NO.391740

vue.js实现带日期星期的数字时钟功能示例

本文实例讲述了vue.js实现带日期星期的数字时钟功能。分享给大家供大家参考，具体如下： !doctype htmlhtmlheadmeta charset="utf-8"titlewww.jb51.net vue.js带日期星期数字时钟/titlestyle type="text/css"html, body { height: 100%;}body { background: #0f3854; background: -webkit-radial-gradient(center ellipse, #0a2e38 0%, #000000 70%); background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%); background-size: 100%;}p { margin: 0; padding: 0;}#clock { font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; color: #ffffff; text-align: center; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #daf6ff; text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);}#clock .time { letter-spacing: 0.05em; font-size: 80px; padding: 5px 0;}#clock .date { letter-spacing: 0.1em; font-size: 24px;……

网友NO.790687

js 显示日期时间的实例(时间过一秒加1)

html： div id="data"font2017年10月17日 15:11:11/font/span js： 1:引入js库 2： function showLocale(objD) { var str, colorhead, colorfoot; var yy = objD.getYear(); if (yy 1900) yy = yy + 1900; var MM = objD.getMonth() + 1; if (MM 10) MM = '0' + MM; var dd = objD.getDate(); if (dd 10) dd = '0' + dd; var hh = objD.getHours(); if (hh 10) hh = '0' + hh; var mm = objD.getMinutes(); if (mm 10) mm = '0' + mm; var ss = objD.getSeconds(); if (ss 10) ss = '0' + ss; var ww = objD.getDay(); if (ww == 0) colorhead = ""; if (ww 0 ww 7) colorhead = "";str = colorhead + yy + "年" + MM + "月" + dd + "日 " + hh + ":" + mm + ":" + ss + " ";return (str);}function tick() {var today;today = new Date();document.getElementById("new_data").innerHTML = showLocale(today);window.setTimeout("tick()", 1000);}tick(); 以上这篇js 显示日期时间的实例(时间过一秒加1)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持码农之家。 ……

发布评论

实例讲解js实现日期显示操作

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

javascript 相关电子书

学习笔记

最新文章

文章排行

最新资源