new Date() 获取当前系统时间
var x = new Date();
console.log( x );
image.png
x.getFullYear() 得到 年
x.getMonth() 得到 月 （注意：是从0到11）
x.getDay() 得到星期 （ 注意：星期天是0 ）
x.getDate() 得到日
x.getHours() 得到时
x.getMinutes() 得到分
x.getSeconds() 得到 秒
var oDiv = document.getElementsByTagName( 'div')[0];
var week = [ '天','一','二','三','四','五','六'];
!function chageTime(){
var x = new Date();
var YY = x.getFullYear();
var MM = x.getMonth() + 1;
var DD = x.getDate();
var DW = week[ x.getDay() ];
var hh = x.getHours();
var mm = x.getMinutes();
var ss = x.getSeconds();
MM = addZero( MM );
DD = addZero( DD );
hh = addZero( hh );
mm = addZero( mm );
ss = addZero( ss );
oDiv.innerHTML = '2018年'+ MM +'月'+ DD +'号星期'+ DW +' '+hh+'时'+mm+'分'+ ss +'秒';
setTimeout( chageTime , 1000 )
}();
function addZero( n ){ //当显示为个位的时候在前面加0；
if( n < 10 ){
n = '0' + n;
}
return n;
}
设置时间
var date = new Date( '2017,11,11,11:30:30'); 第一种方法
console.log( date );
image.png
注意：要得到几月就是写几月，不用加一
Date.parse()
方法可解析一个日期时间字符串，并返回 1970/1/1 午夜距离该日期时间的毫秒数
<script>
var a = Date.parse( '2017,1,1' );
var b = new Date( '2017,1,1' ).getTime();
console.log( a );
console.log( b );
</script>
image.png
Date.now();
返回现在时间的毫秒值/不兼容IE6 7 8
<script>
var a = Date.now( );
var b = new Date( ).getTime();
console.log( a );
console.log( b );
</script>
image.png
日期对象相减
两个时间戳可以相减，得到两者相差的毫秒数数字；
时间戳.getTime(),可以返回该时间戳距离1970年1月1日0时0分0秒的多少毫秒数数字；
<script>
var b = new Date( 2017,8,10 );
var a = new Date();
var c = a - b ;
alert( c );
</script>
得到的是2个时间差的毫秒数
案例
image.png
<body>
<div></div>
<script>
var oDiv = document.getElementsByTagName( 'div' )[0];
var newDate = new Date( 2018,1,15 );
!function lastDate (){
var nowDate = new Date();
var lDate = newDate - nowDate; //得到的是2个时间差的ms
lDate = Math.floor( lDate/1000 )//得到的是秒
var DD = Math.floor( lDate/(24*60*60));//得到天数
var hh = Math.floor( lDate/60/60 ) % 24; //得到小时 lDate/60/60 得到总的多少小时 这里不能 lDate/60/60/24 这样得到的是总的还剩下多少小时，上面一些部分已经用天来表示了 %24 去除掉多少个24小时，剩下就是多少小时了
剩下25小时 ===> 1天1小时 25%24余1
剩下26小时 ===> 1天2小时 25%24余2
剩下27小时 ===> 1天3小时 25%24余3
剩下28小时 ===> 1天4小时 25%24余4
var mm = Math.floor( lDate/60 ) % 60;//得到分钟 lDate/60 算出总的分钟
var ss = Math.floor( lDate % 60 );//得到秒
DD = addZero( DD );
hh = addZero( hh );
mm = addZero( mm );
ss = addZero( ss );
oDiv.innerHTML = '距过年还是'+'<span>'+DD+'</span>'+'天'+'<span>'+hh+'</span>'+'时'+'<span>'+mm+'</span>'+'分'+'<span>'+ss+'</span>'+'秒';
setTimeout( lastDate , 1000 );
}();
function addZero( n ){
if( n<10 ){
n = '0' + n ;
}
return n;
}
</script>
</body>
案例2
得到世界各各地方时间
Animation.gif
<style type="text/css">
/*清除样式*/
*{margin: 0;padding: 0;}
ul li{list-style-type: none;}
a{text-decoration: none; color: inherit;}
/*---------------------------------------------------*/
div{
width: 500px;
height: 200px;
margin: 50px auto;
border-top: 1px solid red;
background: red;
color: #fff;
}
div p{
margin-top: 15px;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>
伦敦时间:
<span></span>
</p>
<p>
北京时间:
<span></span>
</p>
<p>
京东时间:
<span></span>
</p>
<p>
纽约时间:
<span></span>
</p>
<p>
悉尼时间:
<span></span>
</p>
</div>
<script>
var aSpan = document.getElementsByTagName( 'span' );
setInterval( time() , 1000 )
function time() {
var date = new Date(),
UTCtime = date.getTime() + date.getTimezoneOffset()*60*1000; //得到的是世界时间的毫秒数
console.log( date.getTime() );
var arr = [
//计算出各各地区时间差
getTimer( UTCtime ),
getTimer( UTCtime + 8*60*60*1000 ),
getTimer( UTCtime + 9*60*60*1000 ),
getTimer( UTCtime - 5*60*60*1000 ),
getTimer( UTCtime + 10*60*60*1000 ) //悉尼施行夏令时,所以不同时期北京与悉尼时差会发生变化。 非时差的时候两地时差是两个小时,即悉尼时间五点那么北京时间是三点
]
for ( var i=0 ; i<aSpan.length ; i++ ){
aSpan[i].innerHTML = arr[i].DD+'年'+ arr[i].MM +'月'+ arr[i].Dt+'号,星期'+ arr[i].Dw +','+arr[i].hh+'点'+arr[i].mm+'分'+arr[i].ss+'秒'
}
return time;
};
//封装得到 年 月 日...
function getTimer( time ) { //传一个毫秒数
var newDate = new Date( time ),//把毫秒数时间戳
Week = [ '日','一','二','三','四','五','六' ],
DD = newDate.getFullYear(),//得到年
MM = addZero( newDate.getMonth()+1 ),//得到月
Dt = addZero( newDate.getDate() ) ,//得到日
Dw = Week[ newDate.getDay() ] ,//得到 星期(数字的星期)
hh = addZero( newDate.getHours() ) ,//得到 小时
mm = addZero( newDate.getMinutes() ) ,//得到 分钟
ss = addZero( newDate.getSeconds() );//得到 秒
return { //返回一个json
DD : DD,
MM : MM,
Dt : Dt,
Dw : Dw,
hh : hh,
mm : mm,
ss : ss
}
}
//加0函数
function addZero( n ) {
return n<10 ? '0'+n : n+'';
}
</script>
</body>
Animation.gif
<style type="text/css">
/*清除样式*/
*{margin: 0;padding: 0;}
ul li{list-style-type: none;}
a{text-decoration: none; color: inherit;}
/*---------------------------------------------------*/
.wrap{
width: 500px;
height: 100px;
margin: 50px auto;
}
.wrap ul li{
float: left;
width: 41px;
height: 61px;
-webkit-background-size: cover;
background-size: cover;
}
.wrap ul li.num0{
background: url(images/0.png);
}
.wrap ul li.num1{
background: url(images/1.png);
}
.wrap ul li.num2{
background: url(images/2.png);
}
.wrap ul li.num3{
background: url(images/3.png);
}
.wrap ul li.num4{
background: url(images/4.png);
}
.wrap ul li.num5{
background: url(images/5.png);
}
.wrap ul li.num6{
background: url(images/6.png);
}
.wrap ul li.num7{
background: url(images/7.png);
}
.wrap ul li.num8{
background: url(images/8.png);
}
.wrap ul li.num9{
background: url(images/9.png);
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li class="pic"></li>
<li class="pic"></li>
<li><img src="images/d.png" height="61" width="17"/></li>
<li class="pic"></li>
<li class="pic"></li>
<li><img src="images/d.png" height="61" width="17"/></li>
<li class="pic"></li>
<li class="pic"></li>
</ul>
</div>
<script>
/*
思路：
获取时间，分离出来再把他们拼接字符串，然后遍历对应的li里去；
*/
var aPic = document.getElementsByClassName( 'pic' ),
str = '';
setInterval( time() , 1000 )
// 获取时间并分离时间得到 时分秒
function time() {
var sTime = new Date(),
hh = sTime.getHours(),
mm = sTime.getMinutes(),
ss = sTime.getSeconds();
var tArr = [ addZero( hh ) , addZero( mm ) , addZero( ss ) ]; //把分离出来的放在在数组里
str = tArr.join('');//把数组变成字符串
console.log( str );
for ( var i=0 ; i<aPic.length ; i++ ){
aPic[i].className = 'pic num'+ str.charAt(i);//遍历出对应人数字，加className
}
return time;
}
function addZero( n ){
return n < 10 ? '0'+n : n + '';
}
</script>
网友评论