第34天：日期函数定时器倒计时
Posted 半指温柔乐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第34天：日期函数定时器倒计时相关的知识，希望对你有一定的参考价值。
一、日期函数（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>
运行效果：
来郑州1周年纪念日！
以上是关于第34天：日期函数定时器倒计时的主要内容，如果未能解决你的问题，请参考以下文章