|
2021-09-22
学如逆水行舟，不进则退
BOM(browser object model)浏览器对象模型
window对象方法
window.alert(“我是弹窗”); 显示带有一段消息和一个确认按钮的警告框
window.confirm(“我是确认框”); 显示一个带有指定消息和确认、取消按钮的对话框。
返回值：用户点确定按钮，返回true，点击取消按钮，返回false
window.prompt(”我是输入框,我是默认输入文本“);
返回值：用户点击提示框的取消按钮，返回null，用户点击确认按钮，返回输入字段当前显示的文本
<body>
<input type="button" id="btn" value="删除">
<span id="box"></span>
<script type="text/javascript">
var btn=document.getElementById("btn"),
box=document.getElementById("box");
btn.onclick=function(){
alert("我是一个弹窗");
btn.setAttribute("disabled","true");
}
btn.onclick=function(){
var result=confirm("是否确认要删除?\n删除之后不能恢复");
if(result==true){
box.innerText="用户选中了确认";
}else{
box.innerText="用户选中了取消";
}
}
btn.onclick=function(){
var resut=prompt("请输入内容","默认内容");
if(resut==null){
box.innerText="用户点了取消";
}else{
box.innerText=resut;
}
}
</script>
</body>
window.open(pageURL,name,parameters) 打开一个新的浏览器窗口或查找一个已命名的窗口
pageURL 子窗口路径
name 子窗口句柄
parameters 窗口参数（参数用逗号分隔）
window.close() 关闭浏览器窗口
<body>
<input type="button" id="btn" value="打开新窗口" />
<input type="button" id="quit" value="退出" />
<script type="text/javascript">
var btn=document.getElementById("btn"),
quit=document.getElementById("quit");
btn.onclick=function(){
window.open("newHtml.html","newwindow","width=500px,height=500px,toolbar=no");
}
quit.onclick=function(){
window.close();
}
</script>
</body>
超时调用
setTimeout(code,millisec); 在指定的毫秒数后调用函数或计算表达式,setTimeout方法返回一个ID值，通过它取消超时调用
code：要调用的函数或要执行的javascript代码串
millisec：在执行前需要等待的毫秒数
清除超时调用
clearTimeout(timecode)
<body>
<input type="button" id="btn" value="点击我">
<script type="text/javascript">
var btn=document.getElementById("btn");
btn.onclick=function(){
setTimeout("alert('2秒后我自动弹出')",2000);
var out=function(){
alert("3秒后我自动弹出");
}
setTimeout(out,3000);
var timecode= setTimeout(function(){
alert("4秒后我自动弹出");
},4000);
clearTimeout(timecode);
}
</script>
</body>
间歇调用
setInterval(code,millisec); 每隔指定的时间执行一次代码
code：要调用的函数或要执行的javascript代码串
millisec：周期性执行或调用code之间的时间间隔
清除间歇调用
clearInterval(timecode);
<body>
<script type="text/javascript">
var timecode=setInterval(function(){
console.log("每一秒钟打印一次");
},1000);
setTimeout(function(){
clearInterval(timecode);
},10000);
</script>
</body>
通过间歇调用和超时调用实现输出1-10
<body>
<script type="text/javascript">
var num=1;
var time=setInterval(function(){
console.log(num);
num++;
if(num>10){
clearInterval(time);
}
},1000);
var num=1;
function fn(){
console.log(num);
num++;
if(num<=10){
setTimeout(fn,1000);
}else{
clearInterval(time);
}
}
var time=setTimeout(fn,1000);
</script>
</body>
|