一、日期函数(Date()) 设置本地日期:年月日时分秒 1、声明日期 var date=new Date();//创建一个新的日期函数 2、使用函数 date.getTime();//提倡使用, date.valueOf();得到距离1970年的毫秒数
console.log(Date().now());//直接使用 console.log(+new Date());
3、获取日期和时间 getDate() 获取日 1-31 getDay () 获取星期 0-6 getMonth () 获取月 0-11 getFullYear () 获取完整年份(浏览器都支持) getHours () 获取小时 0-23 getMinutes () 获取分钟 0-59 getSeconds () 获取秒 0-59 getMilliseconds () 获取当前的毫秒 getTime () 返回累计毫秒数(从1970/1/1午夜)
二、定时器 window.setInterval("执行的函数",间隔时间); setInterval(fun,1000);每隔1000毫秒执行一次fun函数 setInterval("fun()",1000);//fun()立刻执行 setInterval(fun(){},1000);
三、倒计时 将来的毫秒数-现在的毫秒数,不断转换成时分秒 var endTime=new Date("2015/12/12");//Date(),括号里写日期就是自己定义的时间,不写日期默认当前时间 new Date("2017/10/01 18:30:35");//日期和时分秒之间用空格隔开
案例:
1、日历
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>日历</title>
6 <style>
7 .box{
8 width: 150px;
9 height: 180px;
10 margin: 100px auto;
11 background-color: #369;
12 text-align: center;
13 }
14 .box p{
15 font-size: 14px;
16 color: #fff;
17 line-height: 50px;
18 }
19 .box span{
20 display: block;
21 width: 80px;
22 height: 80px;
23 background-color: yellow;
24 color: red;
25 font-size: 60px;
26 font-weight: 60px;
27 line-height:80px;
28 margin: 20px auto;
29 }
30 </style>
31 <script>
32 window.onload=function(){
33 var box=document.getElementById("box");
34 var boys=box.children;//获取box的所有孩子
35 //星期数组
36 var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
37 //声明日期函数
38 var date=new Date();
39 boys[0].innerHTML=date.getFullYear()+"年"+(date.getMonth()+1)+"月"
40 +date.getDate()+"日"+" "+arr[date.getDay()];
41 boys[1].innerHTML=date.getDate();
42
43 }
44 </script>
45 </head>
46 <body>
47 <div class="box" id="box">
48 <p></p>
49 <span></span>
50 </div>
51 </body>
52 </html>
运行效果:
2、定时器
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>定时器</title>
6 <style>
7 #demo{
8 width: 100px;
9 height: 100px;
10 line-height:100px;
11 text-align: center;
12 font-size: 35px;
13 color: red;
14 margin:100px auto;
15 border:1px solid #c1c1c1;
16 background-color: yellow;
17 }
18 </style>
19 <script>
20 window.onload=function(){
21 var demo=document.getElementById("demo");
22 setInterval(fn,1000);//开启定时器
23 var num=1;
24 function fn(){
25 num++;
26 demo.innerHTML=num;
27 }
28 }
29 </script>
30 </head>
31 <body>
32 <div id="demo"></div>
33 </body>
34 </html>
运行效果:
3、倒计时
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>倒计时</title>
6 <style>
7 #demo{
8 margin: 100px auto;
9 font-size: 35px;
10 color: red;
11 text-align: center;
12 }
13 </style>
14 <script>
15 window.onload=function(){
16 /*var date=new Date();//当前时间
17 console.log(date);
18 var endTime=new Date("2017/10/01 21:30:55");//自定义时间:日期和时分秒
19 console.log(endTime);*/
20
21 var demo=document.getElementById("demo");
22 var endTime=new Date("2017/11/11 00:00:00");
23 setInterval(clock,1000);//开启定时器
24 function clock(){
25 var nowTime=new Date();//得到当前时间
26 //将来的时间毫秒数-现在的时间毫秒数除以1000,取整得到相差秒数
27 var second=parseInt((endTime.getTime()-nowTime.getTime())/1000);
28 var day=parseInt(second/3600/24);//得到天数
29 var hour=parseInt(second/3600%24);//得到小时数
30 var min=parseInt(second/60%60);//得到分钟数
31 var s=parseInt(second%60);//得到秒数
32 //console.log(day+hour+min+second);
33 console.log(s);
34 //给小于10的数前面加0
35 day<10 ? day="0"+day : day;
36 hour<10 ? hour="0"+ hour : hour;
37 min<10 ? min="0"+ min : min;
38 s<10 ? s="0"+ s :s;
39 demo.innerHTML="距离双11抢购时间再剩:"+day+"天"+hour+"小时"+min+"分"+s+"秒";
40
41 }
42 }
43 </script>
44 </head>
45 <body>
46 <div id="demo"></div>
47 </body>
48 </html>
运行效果: