[JS]笔记13之Date对象

-->获取与设置时间的方法
-->使用Date对象制作相应的效果

1、设置时间
创建一个时间对象

new Date(time);

设置时间 time

从1970年1月1日至
几种格式：
new Date("May 25 , 2024");
new Date("2015/12/25,12:20:12");
new Date(2016,1,1); 2016年2月1日零点

 1 <script>
 2 /*创建一个时间对象*/
 3     var Now=new Date();
 4     console.log(Now);//Tue Sep 06 2016 14:47:44 GMT+0800 (中国标准时间-->CST)
 5 /*设置时间*/
 6     var date1=new Date(‘May 25,2024‘);//5月 24日 2014年
 7     console.log(date1);//Sat May 25 2024 00:00:00 GMT+0800 (中国标准时间)
 8     var date2=new Date("2016/10/01,10:10:11");//年月日，时分秒
 9     console.log(date2);//Sat Oct 01 2016 10:10:11 GMT+0800 (中国标准时间)
10     var date3=new Date(2016,10,1,10,10,11,111);//年,月(10代表11月),日，时,分,秒,
11     console.log(date3);//Tue Nov 01 2016 10:10:11 GMT+0800 (中国标准时间)
12     //
13 </script>

2、获取当前时区的时间

时间包括了多个信息，如何获取到其中的某一个信息呢？

--获取当前时间的方法

getFullYear(); 获取4位数的年份
getMonth(); 获取月份，从0~11，0表示1月，7表示8月
getDate(); 获取月份中的天数（日期）
getDay(); 获取星期几，0为星期日，6为星期六

getHours( ) 获取当前小时数
getMinutes( ) 获取当前分钟数
getSeconds( ) 获取当前秒数
getMilliseconds(); 获取当前的毫秒数
getTime(); 获取从1970年1月1日08:00:00到现在的毫秒数

--获取时间的方法代码：

<script>
/*获取时间的方法(Date对象没有属性)*/
    var now=new Date();
    console.log(now);//Sat Sep 10 2016 20:58:13 GMT+0800 (中国标准时间)
    console.log(now.getFullYear());//2016
    console.log(typeof now.getFullYear());//number
    console.log(now.getMonth());//月-8-->9
    console.log(now.getDate());//日-6
    console.log(now.getDay());//星期-2
    console.log(now.getHours());//时-20
    console.log(now.getMinutes());//分-58
    console.log(now.getSeconds());//秒-13
    console.log(now.getMilliseconds());//毫秒（0~999）
    console.log(now.getTime());//1473512293715
</script>

3、设置当前时区的时间

setFullYear(); 设置4位数的年份
setMonth(); 设置月份，从0开始，0表示1月
setDate(); 设置月份中的天数
setHours(); 设置当前的小时数，0-23
setMinutes(); 设置当前的分钟数，0-59
setSeconds(); 设置当前的秒数，0-59
setMilliseconds(); 设置当前的毫秒数
setTime(); 向1970/1/1 添加毫秒数

<script>
    var con=document.getElementById(‘con‘);
    var now=new Date();
    console.log(now);//Tue Sep 06 2016 16:36:40 GMT+0800 (中国标准时间)
    now.setFullYear(2017);
    console.log(now);//Wed Sep 06 2017 16:37:05
    now.setMonth(6);
    console.log(now);//Thu Jul 06 2017 16:38:30
    now.setTime(1000*60*60);//1970年1月1号早上8点添加毫秒数
    console.log(now);//Thu Jan 01 1970 09:00:00
    var date1=new Date(1000*60*60);//当前时间+设置毫秒数
    console.log(date1);//Thu Jan 01 1970 09:00:00
</script>

4、UTC时间

UTC国际标准时间又称世界时间
以零经度线上的时间作为国际上统一采用的标准时间。因为零经度线通过英国格林尼治天文台，所以国际标准时间也称为格林尼治时间GMT。

当前北京时间=国际标准时间+8小时

4-1、获取UTC时区的时间

getUTCFullYear(); 获取UTC日期的4位数年份
getUTCMonth(); 获取UTC日期月份，从0开始
getUTCDate(); 获取UTC日期月份中的天数
getUTCDay(); 获取UTC日期的周几，从0开始
getUTCHours(); 获取UTC日期的小时数，0-23
getUTCMinutes(); 获取UTC日期的分钟数，0-59
getUTCSeconds(); 获取UTC日期的秒数，0-59
getUTCMilliseconds(); 获取UTC日期的毫秒数

4-2、设置UTC时区的时间

setUTCFullYear();设置UTC日期的4位数年份
setUTCMonth();设置UTC日期月份，从0开始
setUTCDate();设置UTC日期月份中的天数
setUTCHours();设置UTC日期的小时数，0-23
setUTCMinutes();设置UTC日期的分钟数，0-59
setUTCSeconds();设置UTC日期的秒数，0-59
setUTCMilliseconds();设置UTC日期的毫秒数

5、获取当前时间效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>获取当前时间</title>
 6 <style>
 7 *{color:red;}
 8 </style>
 9 </head>
10 <body>
11 <h1 id="con"></h1>
12 <script>
13     var con=document.getElementById(‘con‘);
14     var timer=null;
15     timer=setInterval(function(){
16         var now=new Date();
17         var year=now.getFullYear();
18         var month=now.getMonth()+1;
19         var date=now.getDate();
20         var house=now.getHours();
21         var minutes=now.getMinutes();
22         var second=now.getSeconds();
23         var millise=now.getMilliseconds();
24         if(house<10){
25             house=‘0‘+house;
26         }
27         if(minutes<10){
28             minutes=‘0‘+minutes;
29         }
30         if(second<10){
31             second=‘0‘+second;
32         }
33         if(millise<10){
34             millise=‘00‘+millise;
35         }else if(millise<100){
36             millise=‘0‘+millise;
37         }
38         con.innerHTML=‘北京时间：‘+year+‘年‘+month+‘月‘+date+‘号‘+house+‘时‘+minutes+‘分‘+second+‘秒‘+millise+‘毫秒‘;
39     },1)
40 </script>
41 </body>
42 </html>

6、倒计时效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>练习2-倒计时</title>
 6 <style>
 7 *{color:red;}
 8 </style>
 9 </head>
10 <body>
11 <h1>距离国庆节放假还剩：<span id="con"></span></h1>
12 <h1>距离中秋节放假还剩：<span id="con2"></span></h1>
13 <script>
14     var con=document.getElementById(‘con‘);
15     var con2=document.getElementById(‘con2‘);
16     var guoq=new Date("2016/10/1,00:00:00");
17     var zhq=new Date("2016/9/15,00:00:00");
18     var end=guoq.getTime();
19     var end2=zhq.getTime();
20     var timer=null,timer2=null;
21     timer=setInterval(function(){
22         var str1=‘‘;
23         var now=new Date();
24         var start=now.getTime();
25         var zong=end-start;
26         var day=parseInt(zong/(1000*60*60*24));//获取商
27         var _day=zong%(1000*60*60*24);//获取余数
28         var hour=parseInt(_day/(1000*60*60));
29         var _hour=_day%(1000*60*60);
30         var minutes=parseInt(_hour/(1000*60));
31         var _minutes=_hour%(1000*60);
32         var seconds=parseInt(_minutes/1000);
33         var millis=_minutes%1000;
34         str1=day+‘天‘+hour+‘小时‘+minutes+‘分钟‘+seconds+‘秒‘+millis+‘毫秒‘
35         con.innerHTML=str1;
36     },1)
37     timer2=setInterval(function(){
38         var str1=‘‘;
39         var now=new Date();
40         var start=now.getTime();
41         var zong=end2-start;
42         var day=parseInt(zong/(1000*60*60*24));//获取商
43         var _day=zong%(1000*60*60*24);//获取余数
44         var hour=parseInt(_day/(1000*60*60));
45         var _hour=_day%(1000*60*60);
46         var minutes=parseInt(_hour/(1000*60));
47         var _minutes=_hour%(1000*60);
48         var seconds=parseInt(_minutes/1000);
49         var millis=_minutes%1000;
50         str1=day+‘天‘+hour+‘小时‘+minutes+‘分钟‘+seconds+‘秒‘+millis+‘毫秒‘
51         con2.innerHTML=str1;
52     },1)
53 </script>
54 </body>
55 </html>

好友链接地址有些效果可以看看： https://www.cnblogs.com/duenyang/

时间： 2024-11-04 22:18:07

[JS]笔记13之Date对象的相关文章

js面向对象学习笔记之四（Date 对象)

//日期字符串转时间戳 var date="2015-03-18"; date = new Date(Date.parse(date.replace(/-/g, "/"))); date = date.getTime(); document.write(date); var date = new Date(); //返回当前的时间对象 getDate() //日 从 Date 对象返回一个月中的某一天 (1 ~ 31). getDay() //星期 从 Date 对

#9.6课堂JS总结#变量作用域 date()对象 math()对象

一.变量的作用域 1.JavaScript的作用域链 首先看下下面这段代码: <script type="text/javascript"> var rain = 1; function rainman(){ var man = 2; function inner(){ var innerVar = 4; alert(rain); } inner(); //调用inner函数 } rainman(); //调用rainman函数 </script> 观察aler

js - 日期、时间 Date对象方法

Date 是 JS 内置的日期构造函数 var d = new Date();  // 这个是系统当前时间的日期实例 d.getYear(); // 返回 d 实例年份 - 1900 d.getFullYear(); // 获取 d 实例完整的年份 d.getMonth(); // 获取 d 实例月份, 0: 1月, 1: 2月, 依次类推 d.getDate(); // 获取 d 实例日 d.getDay(); // 获取 d 实例星期几,0: 周日, 1: 周一, 2: 周二, .... 6

廖雪峰js教程笔记8 date对象介绍和处理

在JavaScript中,Date对象用来表示日期和时间. 要获取系统当前时间,用: var now = new Date(); now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST) now.getFullYear(); // 2015, 年份 now.getMonth(); // 5, 月份,注意月份范围是0~11,5表示六月 now.getDate(); // 24, 表示24号 now.getDay(); // 3, 表示星期三 now.getHo

Date对象【js】

Date 对象常用的方法:     年:  getFullYear(); 月:   getMonth() + 1;    注意:值.方法返回一个处于 0 到 11 之间的整数,所以按照中国的习惯,应该后面+1 日:   getDate(); 时:   getHours(); 分:    getMinutes(); 秒:    getSeconds(); .................... javascript定时调用函数的方法: 定时方法1: setInterval("要调用的函数或要执行

//js date对象常用方法

//js date对象常用方法//创建事件对象var now = new Date(); //不传参情况下默认返回当前时间//获取年var y=now.getFullYear();//获取月var m=now.getMonth()+1;//返回0-11//获取日var d= now.getDate();//获取小时var h =now.getHours();//获取分钟var i =now.getMinutes();//获取秒var s =now.getSeconds();//获取星期几var

JavaScript基础17——js的Date对象

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js的Date对象</title> 6 <script type="text/javascript"> 7 var date = new Date(); 8 document.write("当前日期:" + date); 9

json Date对象在js中的处理办法(转)

我们在程序用往往通过ajax方式返回json数据,json中包含Date对象时,在js中是Object对象.可以方式获取: 1.new Date(yourJsonDate.time); //你用你的返回Date对象的time值 新建一个js的Date对象. 2.对Js 的Date对象进行格式化.参考以下方法: javascript Date format(js 日期格式化) 方法一: 1 // 对Date的扩展,将 Date 转化为指定格式的String 2 // 月(M).日(d).小时(h)

关于在Safari浏览器中对js Date对象的支持

申请博客好几个月了,一直想写一些东西但是总觉着自己写不好,就一直搁浅了.废话不多说,进入正题! ios中和Safari浏览器中对js Date对象的支持 1.问题情形是这样的,需要在特定的时间显示不同的内容. 解决办法有两种: 1.通过后台获取服务器的时间. 在返回给前端标志,前端通过模板也好,通过其他方式进行判断也好,显示不同的内容.这个我们不管... 2.通过本地获取系统时间显示不同的内容. 我采用的就是这种方式,但是这里就出现了问题.附上代码 function setContentWith