Date.parse()
//Date.parse()方法接收一个表示日期的字符串参数,尝试将这个字符串转换为表示该日期的毫秒数
//如果接收的参数并不表示日期,则该方法返回NaN
let someDate = Date.parse();
console.log(someDate);// NaN
let someDate2 = Date.parse(\'2021-08-24 00:00:00\');
console.log(someDate2);//162973440000
let someDate3 = Date.parse(\'Aug 24,2021\');
console.log(someDate3);//162973440000
let someDate4 = Date.parse(\'8/24/2021\');
console.log(someDate4);//1629734400000
Date.UTC()
//Date.UTC(年,月(0表示1月,以此类推),日(1~31,默认是1),时,分,秒),而且年和月是必需的
let t1 = Date.UTC(2021, 7, 24, 00, 00, 00);
console.log(t1); //1629763200000
//Date构造函数
let date = new Date(2021, 7, 24, 00, 00, 00);
console.log(date); //Tue Aug 24 2021 00:00:00 GMT+0800 (中国标准时间)
//Date.now()返回方法执行时日期和时间的毫秒数
let n = Date.now();
console.log(n);
toLocaleString(),toString(),valueOf()
//toLocaleString()返回与浏览器运行的本地环境一致的时间和日期
let date = new Date(2021, 7, 24, 00, 00, 00);
console.log(date); //Tue Aug 24 2021 00:00:00 GMT+0800 (中国标准时间)
console.log(date.toLocaleString()); //2021/8/24上午12:00:00
//toString()方法将日期对象转为字符串格式
let date2 = new Date(2021, 7, 24, 00, 00, 00)
console.log(date.toString()); //Tue Aug 24 2021 00:00:00 GMT+0800 (中国标准时间)
//valueOf()方法返回的是日期的毫秒表示
let date3 = new Date(2021,7,24,00,00,00);
console.log(date3.valueOf());//1629734400000
let d1 = new Date(2021,0,1);//2021年1月1日
let d2 = new Date(2021,1,1);//2021年2月1日
//d2的毫秒数大于d1的毫秒数
console.log(d1<d2);//true
日期格式化方法
let date = new Date(2021,7,24,00,00,00);
//1.toDateString()显示日期的周,月,日,年
console.log(date.toDateString());//Tue Aug 24 2021
//2.toTimeString()显示日期的时分秒和时区
console.log(date.toTimeString());//00:00:00 GMT+0800 (中国标准时间)
//3.toLocaleDateString()显示日期的年月日
console.log(date.toLocaleDateString());//2021/8/24
//4.toLocaleTimeString()
console.log(date.toLocaleTimeString());//上午12:00:00
//5.toUTCString()显示世界统一时间(UTC日期)
console.log(date.toUTCString());//Mon, 23 Aug 2021 16:00:00 GMT
日期/时间组件方法
let date = new Date(2021,7,24,00,00,00);
//getTime()方法返回日期的毫秒表示,与valueOf()相同
console.log(date.getTime());//1629734400000
//setTime()方法设置日期的毫秒表示
let s = new Date();
s.setTime(date.getTime())
console.log(s);//Tue Aug 24 2021 00:00:00 GMT+0800 (中国标准时间)
//getFullYear()用于获取年
console.log(date.getFullYear());//2021
//getUTCFullYear()用于获取UTC日期的年
console.log(date.getUTCFullYear());//2021
//setFullYear(year)用于设置日期的年,参数year必须是四位数
let date1 = new Date(2021,7,24,00,00,00);
date1.setFullYear(2022);
console.log(date1.getFullYear());//2022
//setUTCFullYear(year)用于设置UTC日期的年,参数year必须是四位数
let date2 = new Date(2021, 7, 24, 00, 00, 00);
date2.setUTCFullYear(2022);
console.log(date2.getUTCFullYear());//2022
//getMonth()用于获取月,0表示1月,以此类推
console.log(date.getMonth());//7
//getUTCMonth()用于获取UTC日期的月,0表示1月,以此类推
console.log(date.getUTCMonth());//7
//setMonth()用于设置日期的月,取值在0-11,大于11则加年
let date3 = new Date(2021,7,24,00,00,00);
date3.setMonth(8);
console.log(date3.getMonth());//8
//setUTCMonth()设置UTC日期的月,取值在0-11,大于11则加年
let date4 = new Date(2021,7,24,00,00,00);
date4.setUTCMonth(8);
console.log(date4.getUTCMonth());//8
//getDate()用于获取日期中的日(1-31)
console.log(date.getDate());//24
//getUTCDate()用于获取UTC日期的日,因为UTC时间和本地时间会相差八个小时,所以如果设置的时间在八点之前那么日就是23日,八点后才是24日
let date5 = new Date(2021,7,24,08,00,00)
console.log(date5.getUTCDate());//24
//setDate()用于设置日期中的日,如果设置的数值大于本月最大天数则加月
let date6 = new Date(2021,7,24,00,00,00);
date6.setDate(25);
console.log(date6.getDate());//25
//setUTCDate()用于设置UTC日期中的日,如果设置的数值大于本月最大天数则加月
let date7 = new Date(2021,7,24,08,00,00)
date7.setUTCDate(25);
console.log(date7.getUTCDate());//25
//getDay()用于获取日期中的周几,0表示周日,1-6表示周一至周六
console.log(date.getDay());//2
//getUTCDay()用于获取UTC日期中的周几,0表示周日,1-6表示周一至周六
console.log(date5.getUTCDay());//2
//getHours()用于获取日期中的时(0-23)
console.log(date.getHours());//0
//getUTCHours()用于获取UTC日期中的时,因为UTC时间和本地时间相差八小时,所以本地时间的八点就是UTC时间的0点
console.log(date7.getUTCHours());//0
//setHours()用于设置日期中的时,如果设置的数值大于23则加日
let date8 = new Date(2021,7,24,00,00,00);
date8.setHours(8);
console.log(date8.getHours());//8
//setUTCDate()用于设置UTC日期中的时，如果设置的数值大于23则加日
let date9 = new Date(2021,7,24,08,00,00)
date9.setUTCHours(10);
console.log(date9);//Tue Aug 24 2021 18:00:00 GMT+0800 (中国标准时间)
//getMinutes();用于获取日期中的分
console.log(date.getMinutes());//0
//getUTCMinutes();用于获取UTC日期中的分
console.log(date9.getUTCMinutes());//0
//setMinutes()用于设置日期中的分
let date10 = new Date(2021,7,24,00,00,00);
date10.setMinutes(8);
console.log(date10.getMinutes());//8
//setUTCMinutes()用于设置UTC日期中的分
let date11 = new Date(2021,7,24,08,00,00)
date11.setUTCMinutes(10);
console.log(date11.getUTCMinutes());//10
//getSeconds()用于获取日期中的秒
console.log(date.getSeconds());//0
//getUTCSeconds()用于获取UTC日期中的秒
console.log(date11.getUTCSeconds());//0
//setSeconds();用于设置日期中的秒,取值大于59则加分
let date12 = new Date(2021,7,24,00,00,00);
date12.setSeconds(15);
console.log(date12.getSeconds());//15
//setUTCSeconds()用于设置UTC日期中的秒,取值大于59则加分
let date13 =new Date(2021,7,24,08,00,00);
date13.setUTCSeconds(15);
console.log(date13.getUTCSeconds());//15
//getMilliseconds()用于获取日期中的毫秒
console.log(date.getMilliseconds());//0
//getUTCMilliseconds()用于获取UTC日期中的毫秒
console.log(date13.getUTCMilliseconds());//0
//setMilliseconds()用于设置日期中的毫秒
let date14 = new Date(2021,7,24,00,00,00);
date14.setMilliseconds(30);
console.log(date14.getMilliseconds());//30
//setUTCMillseconds()
let date15 = new Date(2021,7,24,08,00,00);
date15.setUTCMilliseconds(30);
console.log(date15.getUTCMilliseconds());//30
简易日历案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简易日历</title>
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: skyblue;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.container {
width: 300px;
color: white;
background-color: rgba(255, 255, 255, .3);
border-radius: 5px;
backdrop-filter: blur(50px);
text-align: center;
}
.container p {
width: 100%;
display: flex;
line-height:30px;
}
.container p span {
flex: 1;
}
.year {
font-weight: bold;
}
.weekly{
width:100%;
display:flex;
}
.weekly li{
flex:1;
}
.everyDay li{
float:left;
width:42.86px;
height:30px;
}
</style>
</head>
<body>
<div class="container">
<p>
<span class="lastMonth"><a href="#">上一月</a></span>
<span class="year"></span>
<span class="nextMonth"><a href="#">下一月</a></span>
</p>
<h5 class="month"></h5>
<ul class="weekly">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul class="everyDay">
</ul>
</div>
<script type="text/javascript">
var date = new Date();
fn();
function fn(){
//获取year元素
let year = document.querySelector(\'.year\');
//获取month元素
let month = document.querySelector(\'.month\');
//获取everyDay元素
var everyDay = document.querySelector(\'.everyDay\');
everyDay.innerHTML=\'\';
//获取年月日
let Y = date.getFullYear();
let M = date.getMonth();
let D = date.getDate();
year.innerHTML = Y;
let arr = [\'一月\', \'二月\', \'三月\', \'四月\', \'五月\', \'六月\', \'七月\', \'八月\', \'九月\', \'十月\', \'十一月\', \'十二月\'];
month.innerHTML=arr[M];
//获取当前月的一号是周几
let firstDayWeek = new Date(Y,M,1).getDay();
//获取当前月有多少天
//new Date()第一个参数是年,第二个参数是月(0表示一月),第三个参数表示日(1-31),第三个参数如果是0则会往前推一个月,如果此时M是0,0+1=1,那么现在就是二月了,此时想获取的是一月的天数,那么第三个参数为0则往前推一个月就是一月了
let fate = new Date(Y,M+1,0).getDate();
for(let i =1;i<=fate;i++){
if(i==D){
let li = document.createElement(\'li\')
li.innerHTML=i;
li.style.color="skyblue"
everyDay.appendChild(li);
}else{
let li = document.createElement(\'li\')
li.innerHTML=i;
everyDay.appendChild(li);
}
}
for(let i = 0;i<firstDayWeek;i++){
let li = document.createElement(\'li\');
everyDay.insertBefore(li,everyDay.children[0]);
}
}
document.querySelector(\'.lastMonth\').onclick=function(){
date.setMonth(date.getMonth()-1);
fn();
}
document.querySelector(\'.nextMonth\').onclick=function(){
date.setMonth(date.getMonth()+1);
fn();
}
</script>
</body>
</html>
