setInterval 和setTimeout定时器差异
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script type="text/javascript">
function print(){
console.log('今天星期五')
}
function print1(){
console.log('明天星期六')
}
var timer1 = setInterval(print,2000);//每隔两秒调用这个函数一次
var timer2 = setTimeout(print1,2000);//打开页面后2秒后调用print1函数，仅调用一次
//清除定时器使用
setTimeout(function(){
clearInterval(timer1);
console.log('55555')
},4000);
//定时器的清除使用clearInterval()和setTimeout();
</script>
</html>
日期对象date
将日期转化为标准的日期，封装一个获取实时时间的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p></p>
</body>
<script type="text/javascript">
gettime();//进入页面先执行一次
//将日期转化为标准的日期，封装一个获取实时时间的函数
function gettime(){
console.log('123')
var d = new Date();//得到此刻的时间
var weekArr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var y = d.getFullYear();
console.log(y);//得到哪年
var m = d.getMonth()+1;
console.log(m);//月份是0-11 0表示1月份 得到哪一个月需要加1
var t = d.getDate();
console.log(t);//得到哪一天
var x = weekArr[d.getDay()];
console.log(x)//得到星期几 得到0-6中的一天;0:周天,6:周六
var hour = d.getHours();
console.log(hour);//得到几点
var min = d.getMinutes();
console.log(min);//得到那一分
var sec = d.getSeconds();
console.log(sec);//得到哪一秒
var trueTime = '现在时间'+y+'年'+m+'月'+t+'号'+x+hour+'点'+min+'分'+sec+'秒';
document.querySelector('p').innerText = trueTime;
}
setInterval(gettime,1000);//每隔一秒钟调用一次，在p标签显示实时时间
</script>
</html>
一个倒计时的计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>现在距离2020年1月1日还有<span></span></p>
</body>
<script type="text/javascript">
//计算从现在到2020年需要多少天多少小时多少分多少秒
//date.getTime()//得到的是从1970年1月1日到此刻之间的毫秒数
function time(a,b){
// var day = parseInt((a.getTime()-b.getTime())/3600000/24);
// var hour = parseInt((a.getTime()-b.getTime())/3600000%24);
// var min = parseInt(((a.getTime()-b.getTime())/3600000%24 - hour)*60);
// var sec = parseInt((((a.getTime()-b.getTime())/3600000%24 - hour)*60-min)*60);
// var str = day+'天'+hour+'小时'+min+'分'+sec+'秒';
// return str
//将以上逻辑整理一下
// var t = (a.getTime()-b.getTime())/1000;//将毫秒转化为秒
// var day = parseInt(t/3600/24);//得到天
// var hour = parseInt(t/3600%24);//得到小时
// var min = parseInt((t/3600%24 - hour)*60);//得到分钟
// var sec = parseInt(((t/3600%24 - hour)*60-min)*60);//得到秒
// var str = day+'天'+hour+'小时'+min+'分'+sec+'秒';
// return str
//将以上逻辑继续简化
var t = (a.getTime()-b.getTime())/1000;//将毫秒转化为秒
var day = parseInt(t/(24*3600));
var hour = parseInt(t%(24*3600)/3600);
var min = parseInt(t%3600/60);
var sec = parseInt(t%60);
var str = day+'天'+hour+'小时'+min+'分'+sec+'秒';
return str;
}
//页面打开时初始化一个时间
var d1 = new Date();
console.log(d1.getTime());
var d2 = new Date('2020-1-1');
console.log(d2.getTime());
document.querySelector('span').innerText = time(d1,d2);
//之后调用定时器，每隔一秒重新计算一遍
setInterval(function(){
d1 = new Date();
document.querySelector('span').innerText = time(d1,d2);
},1000);
</script>
</html>
网友评论