一.获取日期时间,秒数实时跳动
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)$));
34 var m = checkTime(parseInt(leftTime/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>
更多专业前端知识,请上 【猿2048】www.mk2048.com