JavaScript学习笔记(五)
程序员文章站
2022-03-28 11:13:21
...
BOM
浏览器对象模型(Browser Object Model):因为浏览器的厂商不同,提供的BOM的的实现可能就不通,所以BOM存在兼容性问题。
BOM*对象:window对象
页面中所有的内容都数据浏览器的,页面中内容也是属于浏览器的(window)对象
一、系统对话框
//window.alert("警告窗口,可以省略window");
if(window.confirm("您确定要退出")){//选择是则返回true,反之false
console.log("是的")
}else{
console.log("不是的")
}
let content = window.prompt("您的姓名");
alert(content);//返回输入的内容以弹窗形式
存在阻塞作用,只有对弹出框做出响应后才会继续执行其他代码
二、页面加载事件
window.onload
:当整个页面中的所有资源(DOM节点、图片资源、js文件、css文件等)加载完毕时候立即执行,等待的时间比较长
window.onunload
:页面关闭后触发的事件
window.onload=function(){
alert("加载加载完毕执行");
}
window.onunload=function(){
console.log("页面关闭执行");
}
window.onbeforeunload=function(){
alert("哈哈哈");
}
三、Location对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="my">西游记</h1>
<button id="btn1">刷新页面1</button>
<button id="btn2">刷新页面2</button>
<hr/>
<a href="javascript:;" id="a1">跳转页面百度</a><br/>
<a href="javascript:;" id="a2">跳转页面163</a><br/>
<a href="http://hao123.com" onclick="return false;">阻止默认行为</a><br/>
<a href="javascript:;" id="a3">跳转页面126</a><br/>
</body>
- 两种刷新页面的方式
<script>
window.onload=function(){
let obj = document.getElementById("my");
obj.innerHTML=Math.random();
document.getElementById("btn1").onclick=function(){
window.location.reload();//刷新当前页面
}
document.getElementById("btn2").onclick=function(){
console.log(window.location.href,"当前的访问路径");
window.location.href = window.location.href;//刷新当前页面
}
</script>
四.案列
定时器
- 在指定的一段时间内重复执行一次:
setTimeout
- 在指定的一段时间内重复循环执行:
setInterval
漫天星:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#mydiv{
width: 600px;
height: 600px;
border: 2px solid deepskyblue;
position: relative;
}
span{
font-size:30px;
color: deeppink;
position: absolute;
}
</style>
</head>
<body>
<button id="btn1">星星</button>
<hr/>
<div id="mydiv"></div>
<script>
window.onload=function(){
document.getElementById("btn1").onclick=function(){
let mydivObj = document.getElementById("mydiv");
window.setInterval(function(){
mydivObj.innerHTML="<span>★</span>";
let x = Number.parseInt(Math.random()*600+1);
let y = Number.parseInt(Math.random()*600+1);
mydivObj.firstElementChild.style.left=x+"px";
mydivObj.firstElementChild.style.top=y+"px";
},50);
}
}
</script>
</body>
</html>
动态时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3 id="time">动态时间</h3>
<script>
function getNow(){
var d = new Date();
var year= d.getFullYear();
var month = d.getMonth()+1;
var date = d.getDate();
date = date<10?"0"+date:date;
var hour = d.getHours();
hour = hour<10?"O"+hour: hour;
var min = d.getMinutes();min = min<10?"O"+min:min;var second = d.getSeconds();
second = second<10?"O"+second : second;
return year+"-"+month+"-"+date+" "+hour+ " : "+min+" : "+second;
}
window.onload = function (){
document.getElementById("time").innerHTML = getNow();
setInterval(function (){
document.getElementById("time").innerHTML = getNow();
},1000)
}
</script>
</body>
</html>
下一篇: JavaScript 学习笔记 五 数组
推荐阅读