html点击按钮显示星期,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实现日期显示的一些操作(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
html点击按钮显示星期,js实现日期显示的一些操作(实例讲解)相关推荐
- js实现日期显示的一些操作
1.js获取当前日期(yyyy-mm-dd) 以下代码是获取到的当前日期: 1 var myDate = new Date(); 2 var year = myDate.getFullYear(); ...
- 基于js的一个日历控件,点击按钮,弹出日历,显示日期到文本框
首先是一些js代码: <Script LANGUAGE="JavaScript"> var months = new Array("一", &quo ...
- python 点击按钮 click_selenium+Python(Js处理click失效)
有时候元素明明已经找到了,运行也没报错,点击后页面没任何反应.这种问题遇到了,是比较头疼的,因为没任何报错,只是 click 事件失效了. 问题: 1.在练习百度的搜索设置按钮时,点保存设置按钮,al ...
- jquery实现body中点击按钮后,在tbody中显示一连串文本框
HTML中的代码如下: 1 <div style="background:#fff;border-style:solid; border-width:1px 1px 0 1px;bor ...
- JS 苹果手机日期显示NaN问题
问题描述 new Date("2019-12-29 10:30:00") 在IOS下显示为NaN 原因分析 带-的日期IOS下存在兼容问题 解决方法 字符串替换 let dateS ...
- 10次机会 js 猜数_JS猜数字游戏实例讲解
本文实例为大家分享了JS实现猜数字游戏的具体代码,供大家参考,具体内容如下 猜数字游戏: 1)利用JS的Math内置对象,实现在1-50内选取一个整数随机数作为游戏答案 2)输入数字进行判断,共有10 ...
- java上下左右建监听,js键盘上下左右键怎么触发function(实例讲解)
function jumpPage() { if (event.keyCode==37)//左 fun_a(); if (event.keyCode==38)//上 fun_b(); if (even ...
- js图片轮换显示实例(转载)
2019独角兽企业重金招聘Python工程师标准>>> 转自:http://www.cnblogs.com/yes123/p/3702519.html 用js脚本实现图片轮换显示,很 ...
- php点击文字弹出js提示框,js弹出框、对话框、提示框、弹窗实现方法总结(推荐)...
一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...
最新文章
- R语言ggplot2可视化散点图(scatter plot)、并在可视化图像的顶部和右边添加边缘直方图(Marginal Histogram)、使用geom_smooth函数基于lm方法拟合数据点之间
- [简单题]换一个思维,代码简洁度就完全变了(Python实现)
- telnet本机端口不通原因_【Academic】ssh端口转发实战复习 之 R
- 「Jupyter」ubuntu下安装jupyterlab后jupyterlab:未找到命令
- linux 卸载自带java_卸载linux系统自带JDK,安装自己的jdk
- Redis 持久化之RDB和AOF
- 马云给程序员脱离单身的一些建议
- 北京文化:目前《你好李焕英》贡献营收约6000万至6500万元
- [异常解决] How to build a gcc toolchain for nRF51 on linux (very detailed!!!)
- python爬取谷歌图片_Python爬取谷歌街景图片
- Spark3.0新特性-AQE
- hdu1728 (直撞bfs)
- 解决python关于UnicodeEncodeError: 'gbk' codec can't encode character '\xa3'报错的问题
- 编程打印如下形式的杨辉三角形,打印的杨辉三角形的行数n(不超过10行)要求由用户从键盘输入。要求按照如下函数原型进行编程,不能使用全局变量
- 设计一个好的游戏世界观需要哪些必备要素?
- [洛谷P2698][USACO12MAR]花盆Flowerpot
- 无泪的眼神---上海街头真实的一幕!(转自 燕南社区)
- ASP中LIKE模糊查
- 星型模型和雪花型模型的区别
- ios调用百度地图智能联想搜索