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>
来源: http://www.jianshu.com/p/122fe94c0680