详解Javascript中Date对象的使用，并实现倒计时函数

来源：这里教程网时间：2026-03-01 15:11:45 作者：

1. Date对象是什么 2. Date对象里的常用方法 3. 封装获取当前时间的函数 4. 开始封装一个日期倒计时的函数 5. 进行测试Demo 6. 介绍类库一、Date对象是什么 Date 对象用于处理日期和时间，一个日期格式化的对象，创建一个Date对象可以直接使用new Date()，括号里可以传入一个时间的格式，就像这样 new Date("month,dd,yyyy hh:mm:ss"); new Date("yyyy,month,dd hh:mm:ss"); new Date("month,dd,yyyy"); new Date(yyyy,month,dd,hh,mm,ss); new Date(yyyy,month,dd); new Date(ms); 1 2 3 4 5 6 在这里，我们按F12打开控制台(找到Console)，然后输入：console.log(new Date()) 它会返回一个当前的时间，如下图所示：二、Date对象里的常用方法在这里可以先let date = new Date()，然后就可以开始调用Date对象中的方法了，这些步骤都可以按F12打开控制台进行调试 date.getFullYear() 从 Date 对象以四位数字返回年份 date.getMonth() 从 Date 对象返回月份 (0 ~ 11) (在这先说明一下，获取当前月份一定要在这个基础上+1，不然月份就会少一个月) date.getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6) date.getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31) date.getHours() 返回 Date 对象的小时 (0 ~ 23) date.getMinutes() 返回 Date 对象的分钟 (0 ~ 59) date.getSeconds() 返回 Date 对象的秒数 (0 ~ 59) date.getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999) date.getTime() 返回 1970 年 1 月 1 日至今的毫秒数有了以上的知识，然后我们就可以开始写一个获取当前时间的函数了三、获取当前时间的函数 function currentTime() { let date = new Date(); //获取年份 let year = date.getFullYear(); //获取月份 let getMonth = date.getMonth() + 1; let month = getMonth < 10 ? "0" + getMonth : getMonth; //获取当前日期号 let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); //获取小时 let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); //获取分钟 let minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); //获取秒数 let second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); //最后返回一个当前的时间格式 return `${year}-${month}-${day} ${hour}:${minute}:${second}` } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 记得在date.getMonth()的基础上加回1得到准确的月份，在获取月份，日期，小时，分钟，秒数的时候要做下判断，如果它们在0到9之间，要在前面拼接一个0，不然时间格式就会像这样：2020/5/19 12:37:5，它并不好看。最后return的模板字面量是ES6的语法，也可以换成字符串拼接的格式，然后我们就直接调用这个函数console.log(currentTime())，便可获得这样的一个时间2020-05-19 12:37:05，当然，里面的时间格式你们可以自行修改，比如2020/05/19 12:37:05，看你自己个人喜好。然后我们开始进入正题???? 四、开始封装一个日期倒计时的函数 //format传入一个结束日期的时间 function endTime(format) { let date = new Date(); //获取当前时间的毫秒数 let now = date.getTime(); //结束日期 let endDate = new Date(format); //获取结束日期的毫秒数 let end = endDate.getTime(); /*剩余的时间=结束的时间-当前时间，毫秒数再除以1000获得秒数*/ let leftTime = (end - now) / 1000; //如果剩余时间大于0，开始做判断 if (leftTime >= 0) { //Math.floor(向下取整) /*剩余时间的秒数除以60得到分钟数，再除以60得到小时数，再除以24获得天数*/ let day = Math.floor(leftTime / 60 / 60 / 24); /*获取小时数要做取余处理，不够一天，那么余下的时间就是小时数，获取分钟数，秒数也都是同理 */ let hour = Math.floor(leftTime / 60 / 60 % 24); let minute = Math.floor(leftTime / 60 % 60); let second = Math.floor(leftTime % 60); //最后输出的时间格式按喜好转换 return `${day}天${hour}小时${minute}分${second}秒`; } else { //时间过了 alert('时间已过') } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 至此，你理解了如何封装这两个函数了吗？五、进行测试Demo 然后，我们就开始写一个demo到网页中，来测试一下我们的成果，此段代码可直接复制到你们的编译器去食用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>倒计时demo</title> <style> body { /* background: url('1.gif') no-repeat; 背景图，可以自行添加*/ background-size: 100% 100%; background-attachment: fixed; min-width: 960px; } .container { margin-top: 20px; margin-left: 150px; } </style> </head> <body> <div> <div> <h1></h1> </div> <h2></h2> <h2></h2> </div> </body> <script> let format = "2020-09-01 00:00:00 " let title = '距离:' + format + '还有' document.querySelector('.title').innerHTML = title setInterval(() => { document.querySelector('.currentTime').innerHTML = '当前时间:' + currentTime(); document.querySelector('.endTime').innerHTML = endTime(format); }); function currentTime() { let date = new Date(); let year = date.getFullYear(); let getMonth = date.getMonth() + 1; let month = getMonth < 10 ? "0" + getMonth : getMonth; let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); let minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); let second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); return `${year}-${month}-${day} ${hour}:${minute}:${second}` } console.log(currentTime()) function endTime(format) { let date = new Date(); let now = date.getTime(); let endDate = new Date(format); let end = endDate.getTime(); let leftTime = (end - now) / 1000; if (leftTime >= 0) { let day = Math.floor(leftTime / 60 / 60 / 24); let hour = Math.floor(leftTime / 60 / 60 % 24); let minute = Math.floor(leftTime / 60 % 60); let second = Math.floor(leftTime % 60); return `${day}天${hour}小时${minute}分${second}秒`; } else { alert('时间已过') } } </script> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 最后的结果：六、介绍时间类库一个很好用的JavaScript 日期处理类库Moment.js，可以用来处理各种时间样式，附上使用方式有了这个类库之后就如虎添翼了，让你处理时间更加的简单快捷方便附上文档地址http://momentjs.cn/ 具体使用方式可参考文档安装: npm install moment --save yarn add moment 浏览器安装: <script src="moment.js"></script> <script> moment().format(); </script> 1 2 3 4 至此你知道如何处理各类时间了吗？如果觉得写的还行的话欢迎点赞~

编辑推荐：

返回列表

详解Javascript中Date对象的使用，并实现倒计时函数

编辑推荐：

相关推荐

excel表格怎样在数字前输入0

excel表格里怎么替换数据

excel表格里面如何插入圆形

excel表格里怎么添加表格数据透视表

excel表格中怎么添加线边框

excel表格里怎样设置条件自动排序

excel表格例怎样导入数据库

Excel表格如何设置数据排序

excel表格里怎么选择性粘贴快捷键

excel表格怎么插入分隔符号

excel表格怎么设置多行多列数据内容排序

Excel表格如何设置行和列相互转换

excel表格连接公式怎么使用

excel表格怎样链接到cad中

雷神推出 MIX PRO II 迷你主机：基于 Ultra 200H，玻璃上盖 + ARGB 灯效

制造商 Musnap 推出彩色墨水屏电纸书 Ocean C：支持手写笔、第三方安卓应用

最新软件资讯

热文推荐

天极热推