1:定時(shí)器
····
<html>
<head>
<script>
/*
setTimeout 設(shè)置過期時(shí)間
setTimeout(時(shí)間到了之后要執(zhí)行的行為,什么時(shí)間 毫秒 開始執(zhí)行)
setInterval 設(shè)置中斷時(shí)間
setInterval(時(shí)間到了之后要執(zhí)行的行為 , 間隔多長(zhǎng)時(shí)間再執(zhí)行 )
*/
// 兩秒之后執(zhí)行,執(zhí)行完當(dāng)前函數(shù),不再重復(fù)執(zhí)行
setTimeout(function(){
console.log("爆炸了");
} , 2000);
// 只是中斷,每個(gè)一段時(shí)間休息一回,然后接著執(zhí)行
setInterval(function(){
console.log("死了一回");
} , 2000 );
function daojishi(){
let t = new Date();
document.getElementById("showTime").innerHTML = t.toLocaleTimeString();
}
let fafuqushi = setInterval( daojishi , 1000 );
function stop(){
clearInterval(fafuqushi);
}
</script>
</head>
<body>
<div id="showTime">
</div>
<button onclick="stop()">你敢按嗎?</button>
</body>
</html>
····
2:一閃一閃亮晶晶
····
html>
<head>
<style>
#container{
width: 400px;
height: 400px;
border: 1px solid yellowgreen;
background-color: black;
position: relative;
}
span{
font-size: 30px;
color: yellow;
position: absolute;
}
</style>
<script>
var timer;
function start_flash(){
timer = setInterval(function(){
document.getElementById("container").innerHTML = "<span> * </span> ";
let x = parseInt( Math.random()*400 + 1 );
let y = parseInt( Math.random()*400 + 1 );
document.getElementById("container").firstElementChild.style.left = x + "px";
document.getElementById("container").firstElementChild.style.top = y + "px";
} , 200 );
}
function stop_flash(){
clearInterval(timer);
}
</script>
</head>
<body>
<div id="container">
</div>
<button id="star_flash" onclick="start_flash()"> 亮晶晶 </button>
<button id="star_flash" onclick="stop_flash()"> 停止亮晶晶 </button>
</body>
</html>
····
3:定時(shí)跳轉(zhuǎn)網(wǎng)頁
····
<html>
<head>
<style>
#box{
width: 1300px;
height: 100px;
line-height: 100px;
border: 1px solid black;
color: yellowgreen;
font: 29/30px "simsun";
text-align: center;
}
</style>
</head>
<body>
<div id="box">
5 秒之后,跳轉(zhuǎn)到百度
</div>
</body>
<script>
var div = document.getElementById("box");
var num = 5;
var timer = null;
timer = setInterval(() => {
num --;
div.innerHTML = num +"秒之后跳轉(zhuǎn)百度";
if (num == 0) {
clearInterval(timer);
location.;
}
}, 1000 );
</script>
</html>
····
4:彈窗
····
<html>
<head>
<script>
alert("我是彈窗");
window.alert("全寫的窗口彈窗");
confirm("消息確認(rèn)窗口");
let age = prompt("請(qǐng)輸入你的年齡");
alert(age);
</script>
</head>
<body>
</body>
</html>
····