javascript 内置对象Date总结及案例
📋 个人简介
- 💖 作者简介:大家好,我是阿牛,全栈领域新星创作者。😜
- 📝 个人主页:馆主阿牛🔥
- 🎉 支持我:点赞👍+收藏⭐️+留言📝
- 📣 系列专栏:硬泡 javascript🍁
- 💬格言:迄今所有人生都大写着失败,但不妨碍我继续向前!🔥
上期传送门:
👉初识 JavaScript(揭开javascript的神秘面纱)
👉javascript中的数据类型
👉javascript中的数据类型转换
👉javascript 基础案例(循环)
👉面试官最爱考的 javascript 预解析,你搞明白了吗?
👉“撩过”c++的对象,“拿捏”了python的对象,你还怕拿不下javascript的对象吗?
👉javascript 内置对象Math总结及其案例
前言
今天总结javascript中Date的使用,并且写一个重要的网页倒计时的核心算法案例。
Date的基本使用
内置对象Date是构造函数,用new创建对象,无参数时返回当前时间,可加参数返回特定时间
//内置对象Date是构造函数,用new创建对象,无参数时返回当前时间,可加参数返回特定时间
var now_time = new Date();
console.log(now_time);
// 年月日之间可以用-或者/
var time_1 = new Date('2018-05-06 12:36:15');
var time_2 = new Date('2018/05/06');
console.log(time_1);
console.log(time_2);
格式化时间
可以从上图看到返回的时间格式 Sun May 06 2018 00:00:00 GMT+0800 (中国标准时间) 不符合我们中国人的表示习惯
所以我们需要获取日期的指定部分,然后进行日期格式化。
方法名 | 说明 | 代码 |
---|---|---|
getFullYear() | 获取当年 | Obj.getFullYear() |
getMonth() | 获取当月,返回0 -11 | Obj.getMonth() |
getDate() | 获取当天日期 | Obj.getDate() |
getDay() | 获取星期几(周日0 到 周六6) | Obj.getDay() |
getHours() | 获取当前小时 | Obj.getHours() |
getMinutes() | 获取当前分钟 | Obj.getMinutes() |
getSeconds() | 获取当前秒钟 | Obj.getSeconds() |
1.格式化日期 - 年,月,日
//格式化日期- 年,月,日
var date = new Date(); // 实例化一个日期对象
var year = date.getFullYear(); // 返回当前日期年份
var month = date.getMonth() + 1; //返回的是0-11,分别对应1-12月,所以接果+1才是正确的月数
year = year < 10? '0' + year: year ;
var dates = date.getDate(); // 返回几号
dates = dates < 10? '0' + dates: dates ;
var day = date.getDay(); //返回的是0-6,分别对应星期天-星期六
var day_arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六',]
console.log('今天是:'+ year + '年' + month + '月' + dates + '日' + day_arr[day]);
2.格式化时,分,秒
function getTime(){
var time = new Date();
var h = time.getHours();
h = h < 10? '0' + h: h;
var m = time.getMinutes();
m = m < 10? '0' + m: m;
var s = time.getSeconds();
s = s < 10? '0' + s: s;
return h + ':' + m + ':' + s ;
}
console.log(getTime());
获取Date总的毫秒数(时间戳)
我们时常可以看到时间戳,那么他是怎么来的呢?
其实时间戳表示的是从1970年1月1号到当前时间的总的毫秒数。
至于为什么是1970年的这个时间,感兴趣的可以百度看看,十分有趣。
在我们javascript中获取时间戳有三种方法。
//获取Date总的毫秒数(时间戳) ,是从1970年1月1号到当前的总的毫秒数 至于为什么是这个时间,感兴趣的可以百度看看,十分有趣
//1.通过 valueOf() 或者 getTime() 方法
var date = new Date();
console.log(date.valueOf()); //得到的是我们当前时间距离1970 1.1的总的毫秒数
console.log(date.getTime());
//2.简单的写法(最常用的写法)
var date = +new Date();
console.log(date);
//3.H5 新增的,ie9以下不适用
console.log(Date.now());
案例-网页倒计时核心算法(重要)
1)核心算法:输入的时间减去现在的时问就是利余的时问,即倒计时,但是不能拿着时分秒相减,比如05分减去25分,结果会是负数的。
2)用时间载来做。用户输入时间总的老秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。
3)把剩余时间总的毫秒数化为秒然后转换为天、时、分、秒(时间转换为时分秒)
转换公式下:
d = parselnt (总秒数/60/60/24); 计算天数
h = parselnt (总秒数/60/60%24); 计算小时
m = parselnt (总秒数/60%60); 计算分数
s = parselnt (总秒数%60); 计算当前秒数
//网页倒计时核心算法
function countTime(time){
var newTime = +new Date(); //获取当前总的毫秒数(时间戳)
var inputTime = +new Date(time); // 得到指定时间的时间戳
var times = (inputTime - newTime) / 1000; // 剩余时间的秒数
var d = parseInt(times / 60 / 60 / 24); // 天数 ,取整
d = d<10 ? '0'+d : d; // 补零
var h = parseInt(times / 60 / 60 % 24); // 时
h = h<10 ? '0'+h : h;
var m = parseInt(times / 60 % 60); //分
m = m<10 ? '0'+m : m;
var s = parseInt(times % 60); //秒
s = s<10 ? '0'+s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countTime('2022-03-01 18:00:00'));
结语
你学废了吗?关注本专栏,持续更新中···
相关文章
- JavaScript 的入门学习案例,保证学会!
- Understanding the Module Pattern in JavaScript
- 【学习笔记46】JavaScript购物车的实现
- 59 爬虫 - Selenium案例(执行 JavaScript 语句)
- JavaScript 28. this 关键字
- 【JavaScript 零基础入门】内置对象(二)------ Date 对象
- 【JavaScript】关于prototype原型的一些链接
- mobile javascript
- 《JavaScript忍者秘籍》——2.4 测试套件基础知识
- 《JavaScript启示录》——1.10 原始值比较采用值比较
- Javascript图表插件HighCharts用法案例
- JavaScript逻辑练习案例:实现倒计时和显示打开时间
- 分享一个JavaScript小案例,在页面上输出乘法口诀表,并对齐
- javascript函数与表达式
- 华为OD机试 - 最少数量线段覆盖(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- 在JavaScript中对HTML进行反转义
- JavaScript经典案例之按下拖拽、跟随鼠标移动