javascript 内置对象Date总结及案例

简介: 前言今天总结javascript中Date的使用,并且写一个重要的网页倒计时的核心算法案例。

前言

今天总结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);

image.png

image.png

//格式化日期- 年,月,日
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]);

image.png

  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());

image.png

获取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());

image.png

案例-网页倒计时核心算法(重要)

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'));

image.png

相关文章
|
JavaScript 前端开发
JavaScript Date(日期) 对象
JavaScript Date(日期) 对象
182 2
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
|
10月前
|
JavaScript 前端开发 索引
40个JS常用使用技巧案例
大家好,我是V哥。在日常开发中,JS是解决页面交互的利器。V哥总结了40个实用的JS小技巧,涵盖数组操作、对象处理、函数使用等,并附带案例代码和解释。从数组去重到异步函数,这些技巧能显著提升开发效率。先赞再看后评论,腰缠万贯财进门。关注威哥爱编程,全栈开发就你行!
292 16
|
9月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
9月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
JavaScript 前端开发
JavaScript Date
【10月更文挑战第06天】
180 18
|
JavaScript 前端开发 UED
Javaweb之javascript的小案例的详细解析
通过上述步骤,我们得到了一个动态更新的实时时钟,这个简单的JavaScript案例展示了定时器的使用方法,并讲解了如何处理日期和时间。这个案例说明了JavaScript在网页中添加动态内容与交互的能力。对于涉足JavaWeb开发的学习者来说,理解和运用这些基础知识非常重要。
137 11
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
197 0
|
JavaScript 前端开发
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
这篇文章介绍了JavaScript中的数组、Date对象、Math对象以及包装类(String、Number、Boolean),并详细讲解了数组的创建、方法(如forEach、push、pop、unshift、slice、splice)和遍历操作,以及工厂方法创建对象和原型对象的概念。
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
649 0

热门文章

最新文章