第34天：日期函数、定时器、倒计时

最新推荐文章于 2024-09-12 18:41:26 发布

原创最新推荐文章于 2024-09-12 18:41:26 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

68 篇文章

订阅专栏

本文介绍了JavaScript中日期函数的应用及定时器的实现方法，并通过具体案例展示了如何制作日历、实现定时器功能以及开发倒计时程序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，日期函数（Date（））
设置本地日期：年月日时分秒
1，声明日期
var date = new Date（）; //创建一个新的日期函数
2，使用函数
date.getTime（）; //提倡使用，
date.valueOf（）;得到距离1970年的毫秒数

的console.log（日期（）现在（））; //直接使用
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（乐趣，1000）;每隔1000毫秒执行一次乐趣函数
的setInterval（ “有趣（）”，1000）; //乐趣（）立刻执行
的setInterval（乐趣（）{}，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>

运行效果：

来郑州1周年纪念日！