资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/js笔记系列之--时间及时间戳

js笔记系列之--时间及时间戳

wapeyang / 1882人阅读

摘要：入门系列之时间及时间戳时间及时间戳时间及时间戳是里面很常见的一个概念，在我们写前端页面的时候，经常会遇到需要获取当前时间的情况，所以，了解中的时间概念非常重要。

js入门系列之
时间及时间戳 时间及时间戳

时间及时间戳是js里面很常见的一个概念，在我们写前端页面的时候，经常会遇到需要获取当前时间的情况，所以，了解js中的时间概念非常重要。而时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数，在关于时间的计算中也起着不可替代的作用。下面我们通过代码来认识一下他们。首先，我们先通过代码获取当前时间:

var time=new Date();
var timeTamp=time.getTime();
text.innerHTML="time:"+time+" 
timeTamp:"+timeTamp;

如图所示，我们所得到的time就是js中Date对象的实例，在不添加任意参数的情况下我们可以得到当前的时间，而通过getTime我们可以把Date实例转化为时间戳。通过代码运行结果我们可以看到，time一般是一个字符串，而timeTamp则是一个纯数字，所以我们一般把time用来显示，而把timeTamp用来计算~
既然提到了时间，那么肯定关系到了时间上的计算。先不急，我们先来熟悉一下关于Date对象的函数，常见的有getFullYear,getMonth,getDate,getMinute,getSecond,我们用代码看一下他们的作用:

var text=document.getElementById("text"); 
var time=new Date();
var timeTamp=time.getTime();
var year=time.getFullYear();
var month=time.getMonth();
var date=time.getDate();
var hour=time.getHours();
var minute=time.getMinutes();
var second=time.getSeconds();
text.innerHTML="time:"+time+"
timeTamp:"+timeTamp+"
year:"+year+"
month:"+month+"
date:"+date+"
hour:"+hour+"
minute:"+minute+"
second:"+second;

从图中我们可以看到关于时间的每部分我们都可以多带带得出，使得后续时间计算尤为方便。提示一下：多带带返回的月份是从0开始算的，结果中返回了4，也就是代表是五月。那么既然有get方法，就有对应的set方法，这里小编只介绍setFullYear方法，其他的就让读者们自己去挖掘把。

var time=new Date(); 
var timeTamp=time.getTime();
time.setFullYear(2018,4,20);
text.innerHTML="time:"+time;

setFullYear可以帮我们将time设定为我们期待的时间，这在实际中是非常实用的，尤其是写倒计时之类的demo。相似的还有parse函数,只不过它返回的是指定时间的时间戳，这两个函数各有所用之地，作用相似：

var toTamp=Date.parse("12 19,2015"); 
text.innerHTML="toTamp:"+toTamp;

下面我们利用现有的函数写一个倒计时，是到2018-5-20号的：

var text=document.getElementById("text");
var toTamp=Date.parse("5 20,2018");
setInterval(function(){
var time=new Date();
var timeTamp=time.getTime();
var overTamp=toTamp-timeTamp;
var overTime=new Date(overTamp);
overTime.setFullYear(overTime.getFullYear()-1970);
overTime.setHours(overTime.getHours()-8);
var oyear=overTime.getFullYear();
var omonth=overTime.getMonth();
var odate=overTime.getDate();
var ohour=overTime.getHours();
var ominute=overTime.getMinutes();
var osecond=overTime.getSeconds();
text.innerHTML="离2018-5-20剩余时间还有：
"+oyear+"年"+omonth+"月"+odate+"天"+ohour+"时"+ominute+"分"+osecond+"秒";
},1000);

这是一个十分简易的倒计时，但是所用到的代码确实不多而且简洁，虽然不一定是最精确的，但是应该算是最简单的一种方法了。而当你为这个倒计时加上酷炫的特效时，我想你会喜欢上他的~
作为一个新手小白，我也是在前端的道路上不断摸索着。不要因为知识点简单或者不高大上就不去研习，眼光上的盲目会让你的项目摇摇欲坠。以人为戒，以己为戒。

GPU云服务器 云服务器 js时间戳 js获取视频时间戳 js获取当前时间戳 js日期转换时间戳

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107137.html

相关文章

  • js笔记系列之--时间及时间戳

    摘要：入门系列之时间及时间戳时间及时间戳时间及时间戳是里面很常见的一个概念，在我们写前端页面的时候，经常会遇到需要获取当前时间的情况，所以，了解中的时间概念非常重要。 js入门系列之 时间及时间戳 时间及时间戳 时间及时间戳是js里面很常见的一个概念，在我们写前端页面的时候，经常会遇到需要获取当前时间的情况，所以，了解js中的时间概念非常重要。而时间戳是指格林威治时间1970年01月0...

    paulli3 评论0 收藏0

  • 后台开发常问面试题集锦（问题搬运工，附链接）

    摘要：基础问题的的性能及原理之区别详解备忘笔记深入理解流水线抽象关键字修饰符知识点总结必看篇中的关键字解析回调机制解读抽象类与三大特征时间和时间戳的相互转换为什么要使用内部类对象锁和类锁的区别，，优缺点及比较提高篇八详解内部类单例模式和 Java基础问题 String的+的性能及原理 java之yield(),sleep(),wait()区别详解-备忘笔记 深入理解Java Stream流水...

    spacewander 评论0 收藏0

  • 后台开发常问面试题集锦（问题搬运工，附链接）

    摘要：基础问题的的性能及原理之区别详解备忘笔记深入理解流水线抽象关键字修饰符知识点总结必看篇中的关键字解析回调机制解读抽象类与三大特征时间和时间戳的相互转换为什么要使用内部类对象锁和类锁的区别，，优缺点及比较提高篇八详解内部类单例模式和 Java基础问题 String的+的性能及原理 java之yield(),sleep(),wait()区别详解-备忘笔记 深入理解Java Stream流水...

    xfee 评论0 收藏0

发表评论

登陆后可评论

0条评论

wapeyang

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<