BOM-DOME
葛胡媚
删除框提示
alert：弹出一个提示框
confirm：弹出一个带返回值的提示框，里面传的是提示框中显示的内部
我们可以利用它的返回值，来做相应处理
<!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>Document</title>
</head>
<body>
<input type="button" value="弹出框" onclick="test1()">
</body>
<script>
function test1(){
console.log(666);
// window.alert("haha");
var a = window.confirm("确认删除吗？");
console.log(a);
if(a)){
//进行删除操作
alert('删除成功');
}
}
</script>
</html>
另开一个窗口
<!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>父窗口</title>
</head>
<body>
<input type="button" value="打开新窗口到百度" id="btn1">
<input type="button" value="关闭刚才的新窗口" id="btn2">
<input type="button" value="把我自己也关了" id="btn3">
</body>
<script>
/*
window.open(url);//打开新窗口
window.close();//关闭window这个窗口（哪个window调用的close()就关哪个window）
*/
let btn1 = document.getElementById('btn1');
let newWindow;
btn1.onclick = function(){
console.log(666);
newWindow = window.open("https://www.baidu.com");//打开一个新窗口，并返回该窗口的句柄(新窗口的window对象)
}
let btn2 = document.getElementById('btn2');
btn2.onclick=function(){
newWindow.close();
}
let btn3 = document.getElementById('btn3');
btn3.onclick=function(){
window.close();
}
</script>
</html>
开启一次性定时器：
setTimeout();
两个参数，第一个是到时间会触发的js代码，
第二个参数是定时的时间（毫秒）
它还有一个返回值，返回当前定时器的id
关闭一次性定时器：
window.clearTimeout(定时器的id);
开启interval定时器：
setInterval();
两个参数，第一个是到时间会触发的js代码，
第二个参数是定时的时间（毫秒）
它还有一个返回值，返回当前定时器的id
关闭interval定时器：
window.clearInterval(定时器的id);
定时器要执行的代码如果少，可以直接用 引号引起js代码，如"alert(666)"
如果代码多，可以用function(){}这种方式，在函数中写代码。
<!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>定时器</title>
</head>
<body>
<input type="button" value="开启一次性定时器" id="btn1">
<input type="button" value="关闭指定的定时器" id="btn2">
<hr>
<input type="button" value="开启interval定时器" id="btn3">
<input type="button" value="关闭interval定时器" id="btn4">
<p id="p1"></p>
</body>
<script>
let onceId;
let intervalId;
let btn1 = document.getElementById('btn1');
btn1.onclick = function () {
console.log(666);
onceId = window.setTimeout("alert('起床')",2000);
}
let btn2 = document.getElementById('btn2');
btn2.onclick = function () {
console.log(666);aaaa/Js/BOM_demo/Demo03_定时器.html
window.clearTimeout(onceId);
}
// let test1 = function(){
// console.log(6);
// }
let btn3 = document.getElementById('btn3');
btn3.onclick = function () {
console.log(666);
// intervalId = window.setInterval('console.log(1)',1000);
// intervalId = window.setInterval(function(){},1000);
let count = 5;
intervalId = window.setInterval(function(){//注意，这里本身就是循环体，不需要再循环了
//在页面上显示，倒计时 5 秒
let p1 = document.getElementById('p1');
p1.innerHTML = "倒计时"+count+"秒";
if(count>0){
count--;
}else{
window.clearInterval(intervalId);
// window.open("https://www.baidu.com");//开启新窗口
window.location.href="https://www.baidu.com";//在本窗口直接跳转
}
},1000);
}
let btn4 = document.getElementById('btn4');
btn4.onclick = function () {
console.log(666);
window.clearInterval(intervalId);
}
</script>
</html>
类似资料：