JavaScript Date对象应用实例

2018-06-24 00:39:16来源：未知阅读 ()

一.获取日期时间，秒数实时跳动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>date01</title>
 6     <style>
 7         #date{
 8             position: absolute;
 9             font-size: 30px;
10             font-family: '微软雅黑';
11             top:50%;
12             left:50%;
13             -webkit-transform:translate(-50%,-50%);
14         }
15     </style>
16 </head>
17 <body>
18     <div id="date">2017.10.29</div>
19     <script>
20         window.onload = function(){
21             showTime();
22         }
23         //checkTime(i)对分钟和秒进行判断，如果小于10，在其前补0.
24         function checkTime(i){
25             return i < 10? "0"+i:i;
26         }
27         function showTime(){
28             var time = new Date();//日期对象
29             console.log("new Date :"+time);
30             var year_1 = time.getYear();//获得年份
31             console.log("getYear(): "+year_1);
32             var year_2 = time.getFullYear();//获得完整年份
33             console.log("getFullYear(): "+year_2);
34             var month = time.getMonth();//获得月份(0~11)
35             console.log("getMonth(): "+month);
36             var date = time.getDate();//获得日期(1~31)
37             console.log("getDate(): "+date);
38             var day = time.getDay();//星期几(0~6)
39             console.log("getDay(): "+day)
40             var hours = time.getHours();//小时(0~23)
41             console.log("getHours(): "+hours);
42             var min = time.getMinutes();//分钟(0~59)
43             console.log("getMinutes(): "+min);
44             var seconds = time.getSeconds();//秒
45             console.log("getSeconds(): "+seconds);
46 
47             min = checkTime(min);
48             seconds = checkTime(seconds);
49 
50             var weekday = new Array(7);
51             weekday[0] = "星期天"; 
52             weekday[1] = "星期一";
53             weekday[2] = "星期二";
54             weekday[3] = "星期三";
55             weekday[4] = "星期四";
56             weekday[5] = "星期五";
57             weekday[6] = "星期六";
58 
59             var str_time = year_2 + "年" + (month+1) + "月" + date + "日" +" "+ weekday[day] +" "+ hours +":" + min +":" + seconds;
60 
61             document.getElementById('date').innerHTML = str_time;
62             setTimeout(showTime,500);//每500ms执行一次，实现秒数实时跳动。
63         }    
64         
65     </script>
66 </body>
67 </html>

二.高考倒计时功能（天）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>date02</title>
 6     <style>
 7         #date{
 8             position: absolute;
 9             font-size: 30px;
10             font-family: '微软雅黑';
11             top:50%;
12             left:50%;
13             -webkit-transform:translate(-50%,-50%);
14         }
15     </style>
16 </head>
17 <body>
18     <div id="date">2017.10.29</div>
19     <script>
20         window.onload = function(){
21             var now = new Date();//获取当前时间
22             var timedate = new Date("2018,12,23");//截止时间
23             //getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
24             var date = timedate.getTime() - now.getTime();
25             //Math.ceil()向上取整
26             var time = Math.ceil(date/(24*60*60*1000));
27             document.getElementById('date').innerHTML = time;
28 
29         }
30     </script>
31 </body>
32 </html>

三.限时抢

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>date03</title>
 6     <style>
 7         #date{
 8             position: absolute;
 9             font-size: 30px;
10             font-family: '微软雅黑';
11             top:50%;
12             left:50%;
13             -webkit-transform:translate(-50%,-50%);
14         }
15     </style>
16 </head>
17 <body>
18     <div id="date">2017.10.29</div>
19     <script>
20         window.onload = function(){
21             showTime();
22 
23         }
24         function checkTime(i){
25             return i < 10? "0"+i:i;
26         }
27         function showTime(){
28             var now = new Date();//获取当前时间
29             var timedate = new Date("2017/10/30,24:00:00");//截止时间
30             //getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
31             var leftTime = (timedate.getTime() - now.getTime())/1000;
32             var d = checkTime(parseInt(leftTime/(24*60*60)));
33             var h = checkTime(parseInt(leftTime/(60*60)%24));
34             var m = checkTime(parseInt(leftTime/60%60));
35             var s = checkTime(parseInt(leftTime%60));
36             var time = d + "天" + h + "小时" + m + "分钟" + s + "秒";
37             document.getElementById('date').innerHTML = time;
38             setTimeout(showTime,500);
39         }
40     </script>
41 </body>
42 </html>