Unit06： 外部对象概述 、 window 对象 、 document 对象
小代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
//1.确认框
function del() {
var b = confirm("确定要删除此数据吗?");
console.log(b);
}
//2.周期性定时器
function f1() {
//启动周期性定时器:
//告诉浏览器每隔1000ms调用一次函数.
//返回值是定时器的ID,用来停止定时器.
var n = 5;
var id = setInterval(function(){
console.log(n--);
if(!n) {
//停止定时器
clearInterval(id);
console.log("DUANG");
}
},1000);
//当前方法f1相当于主线程,
//启动定时器相当于启动支线程,
//主线程不等待支线程,启动完成后,
//立刻执行下一行,即输出了BOOM.
//支线程在等待1S后才第一次运行.
console.log("BOOM");
}
//3.一次性定时器
var id;
function f2() {
//启动一次性定时器:
//让浏览器在5000ms后调用函数,
//并且调用一次后就自动停止定时器.
id = setTimeout(function(){
console.log("叮叮叮叮叮叮");
},5000);
}
function f3() {
clearTimeout(id);
}
</script>
</head>
<body>
<input type="button" value="删除"
onclick="del();"/>
<input type="button" value="倒计时"
onclick="f1();"/>
<input type="button" value="订闹钟"
onclick="f2();"/>
<input type="button" value="取消"
onclick="f3();"/>
</body>
</html>
电子时钟显示小案例：setInterval
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#clock {
border: 1px solid red;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 20px;
text-align: center;
}
</style>
<script>
//开始
var id;
function start1() {
if(id) {
//id非空,表示定时器已启动,不必再次启动了
return;
}
//id为空,表示未启动,则启动定时器
id = setInterval(function(){
var d = new Date();
var p = document.getElementById("clock");
p.innerHTML = d.toLocaleTimeString();
},1000);
}
//停止
function stop1() {
clearInterval(id);
//停止时清空id,以便于下一次启动
id = null;
}
</script>
</head>
<body>
<p>
<input type="button" value="开始"
onclick="start1();"/>
<input type="button" value="停止"
onclick="stop1();"/>
</p>
<p id="clock"></p>
</body>
</html>
Oclock.html
发送消息小案例：setTimeout
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#msg {
border: 1px solid red;
width: 150px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
}
</style>
<script>
//发送
var id;
function send1() {
if(id) {
//id非空,表示已启动,不要启动第2次
return;
}
//id为空,表示未启动,则启动定时器
//显示正在发送
var p = document.getElementById("msg");
p.innerHTML = "正在发送...";
//延迟3秒,真正发送
id = setTimeout(function(){
p.innerHTML = "已发送";
id = null;
},3000);
}
//撤销
function cancel1() {
if(id) {
//id非空,表示已启动,此时可以撤销
var p = document.getElementById("msg");
p.innerHTML = "已撤销";
clearTimeout(id);
id = null;
}
//id为空,表示未启动,不必撤销
}
</script>
</head>
<body>
<p>
<input type="button" value="发送"
onclick="send1();"/>
<input type="button" value="撤销"
onclick="cancel1();"/>
</p>
<p id="msg"></p>
</body>
</html>
send_msg.html
知识点：
- location
- history
- screen
- navigator
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
//1.location
function f1() {
var b = confirm("确定要离开吗?");
if(b) {
location.href = "http://www.tmooc.cn";
}
}
function f2() {
location.reload();
}
//2.history
function f3() {
history.forward();
}
//3.screen
console.log(screen.width);
console.log(screen.height);
console.log(screen.availWidth);
console.log(screen.availHeight);
//4.navigator
console.log(navigator.userAgent);
</script>
</head>
<body>
<input type="button" value="达内"
onclick="f1();"/>
<input type="button" value="刷新"
onclick="f2();"/>
<input type="button" value="前进"
onclick="f3();"/>
</body>
</html>
时间： 2024-12-21 04:26:51