标签：10 date 毫秒 JavaScript js 简易 var new Data
简易倒计时功能的完成）
灵感来源：
京东的秒杀页面
学习了js的Data对象之后
我们也可以实现类似的功能哦~
接下来 我们先复习一下Data对象的一些细则
然后再完成这个肥肠重要的 倒计时案例~
看完本文后 我们会对 时间戳 的印象更加深刻嗷~
知识点涉及：
为了完成这个小案例 我们需要了解的知识：
js的内置对象：Data
利用Data对象达成目的
Data对象
初步感知Data对象的使用
var date = new Data();
var date1 = new Data('2021-02-15 23:29:16');
是一个构造函数 （与Math对象不一样）
我们可以使用new来调用日期对象
接下来 感受一下日期对象怎么使用~
例1
<script>
// Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象
var arr = new Array(); // 创建一个数组对象
var obj = new Object(); // 创建了一个对象实例
// 1. 使用Date 如果没有参数 返回当前系统的当前时间
var date = new Date();
console.log(date);
// 2. 参数常用的写法 数字型 2019, 10, 01 或者是 字符串型 '2019-10-1 8:8:8'
var date1 = new Date(2019, 10, 1);
console.log(date1); // 返回的是 11月 不是 10月
var date2 = new Date('2019-10-1 8:8:8');
console.log(date2);
</script>
举出了两个用法~
1.返回当前的时间日期
2.返回输入的时间 日期
格式化日期 年月日星期
需要获取日期指定的部分（具体的日子 具体是几几年）
注意：
月份返回的时候 得到的数为 0-11
0就代表一月份 所以要 月份+1
周一返回1 周六返回6 周日返回0
// 格式化日期 年月日
var date = new Date();
console.log(date.getFullYear()); // 返回当前日期的年 2021
console.log(date.getMonth() + 1); // 月份 返回的月份小1个月 记得月份+1 呦
console.log(date.getDate()); // 返回的是 几号
console.log(date.getDay()); // 3 周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
——输出 “年 月 日 星期数”
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
——输出“今天是2021年2月16日 星期二”
格式化时间 时分秒
封装了一个函数
发现打印出来出了一点小瑕疵
为了解决这个 我们修改一下
function getTimer() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
//不满10？在前面加个0吧~
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
//不满10？在前面加个0吧~
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
//不满10？在前面加个0吧~
return h + ':' + m + ':' + s;
}
Data总的毫秒数（时间戳）
重要！ 熟记时间戳的表示方法~
即 距离1970年1月1日的总毫秒数。
有4种方法：
<script>
// 获得Date总的毫秒数(时间戳) 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
// 1. 通过 valueOf() getTime() 法一和法二
var date = new Date();
console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
console.log(date.getTime());
// 2. 简单的写法 (最常用的写法) 法三 也是最常用的方法
var date1 = +new Date(); // +new Date() 返回的就是总的毫秒数
console.log(date1);
// 3. H5 新增的 获得总的毫秒数 法四 兼容性有问题 IE流眼泪了
console.log(Date.now());
</script>
最常用的是
var nowTime = +new Data();
//nowTime就是从1970.1.1到现在 一共经过的毫秒数
times = nowTime/1000;
//一般转化为秒数(times)使用
重点： 倒计时案例
案例分析：
【1】核心算法：输入的时间-现在的时间 = 剩余的时间
即倒计时
**但是不可以直接用时分秒相减
比如：5-20 出负数了都。。
【2】避免结果是负数 用时间戳 解决这个问题
核心算法：用户输入时间的总毫秒数-现在时间的总毫秒数=剩余时间的毫秒数
【3】把剩余时间总的毫秒数转换为 天 时 分 秒（时间戳转换为时分秒）
*取余的作用 是 ：（化为整数不太确切QAQ）
不会出现25h 而是1h
不会出现70分 而是10分
不会出现70s 而是10s
下面来完成代码：
function countDown(time) {
var nowTime = +new Data();
//返回当前时间的总毫秒数
var inputTime = new Data(time);
//返回用户输入时间总的毫秒数
var times = (inputTime - nowTime)/1000;
//得到剩余时间总的秒数times
var d = parseInt(times/60/60/24);
d < 10 ? '0' + d : d;//日期数小于10时 前面添0
var h = parseInt(times/60/60%24);
h < 10 ? '0' + h : h;
var m = parseInt(times/60%60);
m < 10 ? '0' + m : m;
var s = parseInt(times%60);
s < 10 ? '0' + s : s;
retrun (d + '天' + h + '时' + m + '分' + s + '秒');
}
console.log(countDown(‘2021-2-16 19:30:00’));
设置2021-2-16 19:30是我们的终止时间~
我在13:48刷新页面后 出现了距离晚上7点半的时间~
有待改进
之后学习完API 之后 我们可以把倒计时打印到我们的网页上~
就像京东的“限时秒杀效果”一样~
标签：10,date,毫秒,JavaScript,js,简易,var,new,Data 来源： https://blog.csdn.net/qq_45704942/article/details/113824199
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。