setTimeout("函数","未来指定毫秒后调用函数");
clearTimeout(setTimeout("函数","未来指定毫秒后调用函数"));
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="starTime()">开始</button>
<button onclick="stopTime()">停止</button>
<script>
var t;
function fun() {
alert("Hello World");
}
function starTime() {
t=setTimeout("fun()",300);
}
function stopTime()
{
clearTimeout(t);
alert(t);
}
</script>
</body>
</html>
setInterval("fun()",3000);每隔指定时间调用
clearInterval(t);取消setIntval()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="starTime()">开始</button>
<button onclick="stopTime()">停止</button>
<script>
var t;
function fun() {
alert("Hello World");
}
function starTime() {
t=setInterval("fun()",3000);
}
function stopTime()
{
clearInterval(t);
alert(t);
}
</script>
</body>
</html>
计时器:
三个功能 开始 复位 停止
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
height: 50px;
width: 100px;
background-color: skyblue;
padding: auto;
text-align: center;
line-height: 50px;
border: 2px solid black;
position: relative;
cursor: pointer;
border-radius: 5px;
font-weight: 200px;
font-size: 20px;
}
.start {
top: 100px;
right: -500px;
}
.stop {
top: 45px;
right: -700px;
}
.zero {
top: -100px;
right: -600px;
}
.time {
height: 100px;
width: 300px;
top: 50px;
right: -500px;
font-size: 80px;
text-align: center;
line-height: 100px;
font-family: "宋体";
font-weight: 1000;
}
div:hover {
background-color: darkgray;
}
</style>
</head>
<body>
<div class="start" onclick="start()">开始</div>
<div class="stop" onclick="stop()">停止</div>
<div class="zero" onclick="reset()">复位</div>
<div class="time" id="time">0</div>
<script>
var s = 0;
var t;
function start() //开始计时
{
if (!t)
t = setInterval("change()", 1000);
}
function reset() //复位
{
clearInterval(t);
s = -1;
change();
t = null;
}
function stop() // 停止计时
{
clearInterval(t);
t = null;
}
function change() {
s++;
var x = document.getElementById("time");
x.innerHTML = s;
}
</script>
</body>
</html>
电子钟:每秒更新一次页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>电子表</title>
<style>
.table {
height: 100px;
width: 500px;
background-color: grey;
text-align: center;
margin: auto;
border-radius: 5px;
border: 4px solid black;
font-size: 20px;
}
</style>
<script>
function updateTime() {
var date = new Date();
document.getElementById("year").innerText = date.getFullYear();
document.getElementById("month").innerText = date.getMonth() + 1;
document.getElementById("day").innerText = date.getDate();
document.getElementById("hour").innerText = date.getHours();
document.getElementById("minutes").innerText = date.getMinutes();
document.getElementById("second").innerText = date.getSeconds();
}
setInterval(updateTime, 1000);
</script>
</head>
<body onload="updateTime()">
<table class="table">
<th id="year"></th>
<th>年</th>
<th id="month"></th>
<th>月</th>
<th id="day"></th>
<th>日</th>
<th id="hour"></th>
<th>:</th>
<th id="minutes"></th>
<th>:</th>
<th id="second"></th>
</table>
</body>
</html>