前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第34天:日期函数、定时器、倒计时

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

作者头像
半指温柔乐
发布2018-09-11 14:58:43
9410
发布2018-09-11 14:58:43
举报
文章被收录于专栏:前端知识分享

一、日期函数(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、日历

代码语言:javascript
复制
 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、定时器

代码语言:javascript
复制
 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、倒计时

代码语言:javascript
复制
 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>

运行效果:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-09-16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档