<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<!-- 1、定时器方法1:先设置定时器,在执行函数; -->
<button id="start" οnclick="showTime()">开始</button>
<p id="pid"></p>
<button id="stop" οnclick="stopTime()">停止</button>
<script type="text/javascript">
// setInterval():间隔指定的毫秒数,不停地执行某个函数。参数1:函数名;参数2:时间间隔。
var time = setInterval(showTime, 1000);
function showTime() {
var date = new Date(); // 实例化一个Date对象;
var strTime = date.toLocaleTimeString(); // 将时间转换成当前时分秒;
document.getElementById("pid").innerHTML = strTime; // 将时间显示在p标签上;
}
function stopTime() {
clearInterval(time); // 停止计时器;
}
</script>
<!-- 2、定时器方法2:先执行函数,在设置定时器; -->
<br/><br/>
<button id="bid" οnclick="demo1()">开始</button>
<p id="tid"></p>
<button id="uid" οnclick="demo2()">停止</button>
<script type="text/javascript">
var time;
function demo1() {
time = setTimeout(demo1, 1000); // 间隔一秒之后调用函数demo1.
var date = new Date(); // 实例化一个Date对象。
var str = date.toLocaleTimeString(); // 将时间转换为当前时分秒。
document.getElementById("tid").innerHTML = str; // 显示时间。
}
function demo2() {
clearTimeout(time); // 停止方法setTimeout().
}
</script>
</body>
</html>
09-24
09-24