week2.4Date
week2.4Date
什么是时间对象
Date对象是 JavaScript 原生的时间库。它以1970年1月1日00:00:00作为时间的零点,可以表示的时间范围是前后各1亿天(单位为毫秒)。
Date能做什么
获取/控制页面中的时间
Date方法
创建
new Date():当前时间
new Date("2019-11-07 16:00:00"):创建一个固定时间的时间对象
new Date(2019,10,7,16,0,0):创建一个固定时间的时间对象
// Date是JS原生的时间对象库
// 创建一个时间对象
// 获取当前时间的对象
var date1 = new Date();
console.log( date1 );
// 创建一个固定时间的时间对象
var date2 = new Date(2018,7,1,10,0,0);
console.log( date2 );
// 创建一个固定时间的时间对象
var date3 = new Date("2019-06-01 10:00:00");
console.log( date3 );
document.write(date3)
获取
getFullYear()
getMonth():0=>1月 11=>12月
getDate()
getDay()
getHours()
getMinutes()
getSeconds()
gettime方法返回一个整数值,这个整数代表了从1970年1月1日开始计算到date对象中的时间之间的毫秒数
let date = new Date
let date1 = date.getDate()
console.log( date1);
/*
获取年份 getFullYear()
获取月份 getMonth()
获取日期 getDate()
获取星期 getDay()
获取小时 getHours()
获取分钟 getMinutes()
获取秒钟 getSeconds()
*/
var date = new Date();
var year = date.getFullYear()
var month = date.getMonth()+1
var day = date.getDate()
var week = date.getDay()
var hours = date.getHours()
var mins = date.getMinutes()
var secs = date.getSeconds()
if( week === 0 ) week = '天'
if( week === 1 ) week = '一'
if( week === 2 ) week = '二'
if( week === 3 ) week = '三'
if( week === 4 ) week = '四'
if( week === 5 ) week = '五'
if( week === 6 ) week = '六'
var str = year+'年'+month+'月'+day+'日 星期'+week+' '+hours+':'+mins+':'+secs;
document.write( str );//2020年9月4日 星期五 14:5:0
电子表
setInterval(show_time,1000);//每一秒执行一次
show_time();
// 显示时间的函数
function show_time(){
var date = new Date();
var year = date.getFullYear()
var month = date.getMonth()+1
var day = date.getDate()
var week = date.getDay()
var hours = date.getHours()
var mins = date.getMinutes()
var secs = date.getSeconds()
if( week === 0 ) week = '天'
if( week === 1 ) week = '一'
if( week === 2 ) week = '二'
if( week === 3 ) week = '三'
if( week === 4 ) week = '四'
if( week === 5 ) week = '五'
if( week === 6 ) week = '六'
var str = year+'年'+getTwo(month)+'月'+getTwo(day)+'日 星期'+week+' '+getTwo(hours)+':'+getTwo(mins)+':'+getTwo(secs);
document.body.innerText = str ;
}
function getTwo( num ){
return num>=10?num:'0'+num;
}
定时器
setInterval(fn,time): 周期性的循环调用执行,类似于闹钟
setTimeout(fn,time): 定时调用一次,类似于定时炸弹
clearInterval(timer): 清理定时器
clearTimeout(timer): 清理定时器
/*
setTimeout( fn,time ):一次性定时器
setInterval( fn,time ):循环式定时器
参数1:
回调函数
参数2:
时间,ms
clearTimeout():消除定时器(一次性)
clearInterval():消除定时器(循环式)
*/
// setTimeout(function(){
// alert(1);
// },3000);
var num1 = 1;
var timer = setInterval(function(){
if( num1>=10 ) clearInterval(timer);
console.log(num1);
num1++;
},1000);
倒计时抢购
<style type="text/css">
*{margin: 0;padding: 0;}
.container{
width:590px;
margin:10px auto;
border:1px solid red;
text-align: center;
}
</style>
<div class="container">
<img src="./1.jpg">
<h1>
还剩:
<span id="hour"></span>:
<span id="min"></span>:
<span id="sec"></span>
</h1>
</div>
function $(ele){
var e = null;
if( ele[0] === '#' ){
e = document.querySelector(ele)
}else{
e = document.querySelectorAll(ele)
}
return e
}
// 未来时间:固定
// 现在时间:时刻变化的
// 未来-现在
// 1,设置未来时间
// var f_date = new Date();
// f_date.setTime( f_date.getTime()+10*60*1000 )
var f_date = new Date('2020-09-04 15:54:20');//自己设置的
var timer = setInterval(update_time,1000);
update_time();
function update_time(){
//倒计时抢购
// 2,获取当前时间
var now_time = new Date();
// 3,算出未来-现在的时差
var s_time = Math.ceil((f_date-now_time)/1000);
// 3.5,如果时差<=0,就清除定时器
if( s_time<=0 ){
$('h1')[0].innerText = '抢购开始!';
clearInterval(timer);
return;
}
// 4,将剩余时间换算成时,分,秒
var hour = Math.floor(s_time/3600);// 4.45 => 4小时
var min = Math.floor(s_time/60)%60;// 267%60 => 27
var sec = s_time%60;// 16030%60 => 10
// 5,将得到时分秒放入span中
$('#hour').innerText = hour
$('#min').innerText = min
$('#sec').innerText = sec
}