这篇文章主要知识点是关于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;
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); }
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}
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); }
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); }
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实现日期显示的一些操作(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。
以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。
Copyright 2018-2020 www.xz577.com 码农之家
版权投诉 / 书籍推广 / 赞助:520161757@qq.com
纯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……
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;……
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)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……