JS基础-Date内置对象
2019-02-28 本文已影响263人
壹枕星河
Date内置对象
日期对象创建
时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数（时间戳）
var date = new Date();//当前时间的日期对象
var data = new Date(2012,6,10);//2012年7月10号的日期对象
get系列API.png
set系列API.png
★注意:
1、setDay( 这个真没有!!!!,星期是通过设定日期自动计算的 )
2、set系列API可以设置比当前范围更精细的时间
比如：setFullYear（2012，3，5） 设置日期为2018年4月5号
setHours（13，30，0） 设置时间为13:30:00
1秒=1000毫秒
实例： setFullYear(year，month，day)
year：必需，表示年份的四位整数
month：可选,介于 0 ~ 11 之间：如果不填，取系统当月
-1 为去年的最后一个月
12 为明年的第一个月
13 为明年的第二个月
date：可选,表示月中某一天的数值。如果不填，取系统当日
用本地时间表示。介于 1 ~ 31 之间：
0 为上个月最后一天
-1 为上个月最后一天之前的天数
如果当月有31天：
32 为下个月的第一天
如果当月有30天：
32 为下一个月的第二天
<script>
var date = new Date(); ////Wed Feb 27 2019 17:22:46 GMT+0800 (中国标准时间)
// var date = new Date(2018,2,10);
console.log(date);
console.log(date.toLocaleString()); //返回当前时区的时间,2019/2/27 下午5:22:46
console.log(date.toLocaleDateString()); //2019/2/27,只返回日期
console.log(date.getYear()); // 119 返回的是距离20世纪初即1900年的时间。(已废弃)
console.log(date.getFullYear()); //2019 返回当前年份
console.log(date.getMonth()); //返回表示月份的数字。返回值是 0（一月） 到 11（十二月） 之间的一个整数。一月为 0, 二月为 1, 以此类推。
console.log(date.getDay());//返回一周（0~6）的某一天的数字。星期天为 0, 星期一为 1, 以此类推
console.log(date.getDate());//返回某一天
console.log(date.getTime());//返回距 1970 年 1 月 1 日之间的毫秒数
date.setFullYear(2000,2,12);//用于设置年份,这个方法可用于设置月份及月份中的一天。
console.log(date);
</script>
定时器
<script>
//超时定时器
//间隔定时器
setTimeout("console.log(111)", 2000);
setTimeout(function(){
console.log(222);
}, 4000);
setInterval("console.log(333)", 1000);
setInterval(function(){
console.log(444);
},500);
</script>
案例1：距妇女节还有多少天
<script>
var nowDate = new Date();
var nowTime = nowDate.getTime();
nowDate.setMonth(2,8);
var endTime = nowDate.getTime();
/* console.log(nowDate);
var endDate = new Date(2019, 2, 8);
console.log(endDate); */
//两个日期之间的时间戳差值
//var distance = endDate.getTime() - nowDate.getTime();
var distance = endTime - nowTime;
var days = distance/1000/60/60/24;
console.log(days);
</script>
案例2：举例下课的倒计时
<script>
//看看还有多久下课呢？
setInterval(function(){
var nowTime = Date.now();
var date = new Date();
date.setHours(15,0,0);
var endTime = date.getTime();
var distance = parseInt((endTime - nowTime)/1000);
var seconds = distance%60;
var minites = (distance - seconds)/60 % 60;
var hours = (distance - seconds - minites*60)/60/60;
console.log("距离下课还有"+hours+"小时，"+minites+"分钟，"+seconds+"秒");
},1000);
</script>
案例3：日历
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0}
#calendar{width:210px;margin:100px auto; overflow:hidden;border:1px solid #000; padding:20px; position:relative}
#calendar h4{ text-align:center; margin-bottom:10px}
#calendar .a1{ position:absolute;top:20px;left:20px;}
#calendar .a2{ position:absolute;top:20px;right:20px;}
#calendar .week{height:30px; line-height:20px;border-bottom:1px solid #000; margin-bottom:10px}
#calendar .week li{ float:left;width:30px;height:30px; text-align:center; list-style:none;}
#calendar .dateList{ overflow:hidden; clear:both}
#calendar .dateList li{float:left;width:30px;height:30px; text-align:center; line-height:30px;list-style:none;}
#calendar .dateList .ccc{ color:#ccc;}
#calendar .dateList .red{ background:#F90; color:#fff;}
#calendar .dateList .sun{ color:#f00;}
</style>
<script>
</script>
</head>
<body>
<div id="calendar">
<h4>2013年10月</h4>
<a href="javascript:;" class="a1" id="prev">上月</a>
<a href="javascript:;" class="a2" id="next">下月</a>
<ul class="week">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul class="dateList" id="dateList">
</ul>
</div>
<script>
var iNow = 0;
var dateList = document.getElementById("dateList");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
prev.onclick = function(){
iNow--;
calender(iNow);
}
next.onclick = function(){
iNow++;
calender(iNow);
}
// n->1后面一个月 n->-2往前两个月
calender(iNow);
function calender(n){
var date = new Date();
//获取今天是几号
var nowDate = date.getDate();
//把时间拨到n的偏移量所代表的月份的1号
date.setMonth(date.getMonth()+n,1);
//得到一号是星期几
var week = date.getDay();
//这个月总共有多少天
//把日期拨到下个月的0号(这个月的最后一天)
date.setMonth(date.getMonth()+1, 0);
var allDays = date.getDate();
var str = "";
//week个空的li
for(var i = 0; i < week; i++){
str += "<li></li>";
}
//allDays个有日期的li
for(var j = 1; j <= allDays; j++){
//判断月份是当前的还是以后的？
if(n > 0){
//以后的月份,只需要判断周末
if((week+j)%7 === 0 || (week+j)%7 === 1){
//判断周末
//空白li的数量加上当前日期对7求余
str += "<li class='sun'>"+j+"</li>";
}else{
str += "<li>"+j+"</li>";
}
}else if(n < 0){
//以前的日期,直接全部置灰
str += "<li class='ccc'>"+j+"</li>";
}else{
//当前月
if(j < nowDate){
//以前的日期
str += "<li class='ccc'>"+j+"</li>";
}else if(j === nowDate){
//今天
str += "<li class='red'>"+j+"</li>";
}else if((week+j)%7 === 0 || (week+j)%7 === 1){
//判断周末
//空白li的数量加上当前日期对7求余
str += "<li class='sun'>"+j+"</li>";
}else{
str += "<li>"+j+"</li>";
}
}
}
dateList.innerHTML = str;
}
</script>
</body>
</html>
案例4：时钟
<body>
<div id="div">
<img src="img/0.png" />
<img src="img/8.png" />
时
<img src="img/1.png" />
<img src="img/5.png" />
分
<img src="img/0.png" />
<img src="img/9.png" />
秒
</div>
</body>
</html>
<script>
var aImg = document.getElementsByTagName("img");
function addZero(n){
return n < 10 ? "0"+n : ""+n;
}
function getTime(){
var date = new Date(),
hours = addZero(date.getHours()),
minutes = addZero(date.getMinutes()) ,
seconds = addZero(date.getSeconds());
//150103
var timeStr = hours+minutes + seconds;
for(var i = 0; i < aImg.length; i++){
aImg[i].src = "img/"+timeStr[i]+".png";
}
return getTime;
}
//getTime();
//getTime()自己先调用一次,调用之后的结果就是这个函数的返回值
//而返回值就是函数本身,所以就又把这个函数交给了setInterval取执行
setInterval(getTime(),1000);
</script>
