JS-DOM编程-07-周期函数setlnterval
JS-DOM编程-07-周期函数setlnterval
1.获取系统当前时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>周期函数setlnterval</title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
//获取当前标准时间对象
var nowtime1 = new Date();
//默认格式
// document.write(nowtime1);
document.getElementById("timeDiv1").innerText = "默认格式：" + nowtime1;
//本地化格式：
var nowtime2 = nowtime1.toLocaleString();
document.getElementById("timeDiv2").innerText = "本地化格式：" + nowtime2;
//自定义格式
//获取当前标准时间对象
var t = new Date();
var year = t.getFullYear();//返回年信息，以全格式返回
var month = t.getMonth();//月份是0-11
//var dayOfWeed = t.getDay();//获取一周的第几天(0-6)
var day = t.getDate();//获取日信息
var hour = t.getHours()//获取时
var minute = t.getMinutes()//获取分
var second = t.getSeconds()//获取秒
document.getElementById("timeDiv3").innerText = "自定义格式：" +
year + "年" + (month + 1) + "月" + day + "日"
+ hour + "时" + minute + "分" + second + "秒";
//获取格林尼治时间(从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数)
var gltime = t.getTime();//一般使用格林尼治时间当作时间戳(timestamp)
document.getElementById("timeDiv4").innerText = "格林尼治时间：" + gltime;
}
</script>
<div id="timeDiv1"></div>
<div id="timeDiv2"></div>
<div id="timeDiv3"></div>
<div id="timeDiv4"></div>
</body>
</html>
按以上方法获取到当前系统时间后，是静态的，不会自动运行。
下面我们需要做到让显示在网页上的时间自动走起来。
2.显示网页时钟
自动计时：
- 周期函数setInterval()能按照指定的周期(以毫秒计)来调用函数或计算表达式。
- 在定义一个获取当前系统时间的函数后，可以在使用周期函数setInterval按指定的周期调用该函数，如此便可实现自动计时的时钟。
停止自动计时：
- clearInterval()函数可取消setInterval()函数的运行。
- setInterval()函数返回一个值，可以传入clearInterval()函数中终止周期运行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>周期函数setlnterval</title>
</head>
<body>
<script type="text/javascript">
//点击按钮显示当前时间
var displayTime = function() {
var t2 = new Date();
var strTime = t2.toLocaleString();
document.getElementById("timeDiv5").innerText = strTime;
}
//自动定期获取当前时间
// setInterval()按照指定的周期(以毫秒计)来调用函数或计算表达式。
var startTime = function() {
//setInterval()函数返回一个值，可以传入clearInterval()函数中终止周期运行
//不加var，定义为全局参数
stop = window.setInterval("displayTime()",1000);
}
//停止时间
//clearInterval()函数可取消setInterval()函数的运行
//clearInterval()函数的参数必须是setInterval()函数返回的值。
var stopTime = function() {
window.clearInterval(stop);
}
</script>
<input type="button" id="btn1" value="点击开始时间" onclick="startTime();">
<input type="button" id="btn2" value="砸瓦鲁多，停止时间" onclick="stopTime();">
<div id="timeDiv5"></div>
</body>
</html>
