【Javascript Day19】BOM
目录
BOM对象的方法
定时器方法
短信验证码案例
计时器元素动画
同步代码和异步代码
location对象
跳转查询页面参数
跳转多查询参数
BOM对象的方法
// window.alert("提示");
// window 中提供的方法和属性，可以在省略window对象的情况下直接调用
// BOM对象的属性和方法的使用
// alert("提示");
// window.onload = function(){
// // 监控BOM对象的资源加载，当资源加载完成后执行
// var h1Dom = document.querySelector("#title");
// console.log(h1Dom);
// }
// window.addEventListener("load",function(){
// var h1Dom = document.querySelector("#title");
// console.log(h1Dom);
// })
window.addEventListener("DOMContentLoaded",function(){
var h1Dom = document.querySelector("#title");
console.log(h1Dom);
})
window.onresize = function(){
// 当浏览器窗口发生变化时会执行的事件
// 监控的时浏览器加载的DOM显示区域的大小变化
console.log("窗口大小改变了");
}
定时器方法
<input type="button" value="3s内关闭一次性计时器" onclick="closeTimeout()">
<input type="button" value="关闭周期计时器" onclick="closeTimerInterval()">
<script>
// var timer = setTimeout(回调方法,时间ms); 一次性计时器，完成一次执行代码的延迟操作
// 方法会返回一个计时器控制对象(timer) => 浏览器输出的结果是编号，该值实际上是一个控制对象
// clearTimeout(计时器对象) : 一次计时器的关闭
// console.log(1);
var timer1 = setTimeout(function(){
// 3秒之后执行
console.log(2);
},3000);
console.log("timer1:",timer1);
function closeTimeout(){
clearTimeout(timer1)
}
// var timer = setInterval(回调方法,时间ms); 周期性计时器，在设置的时间间隔上多次执行，需要手动停止
// 方法会返回一个计时器控制对象(timer) => 浏览器输出的结果是编号，该值实际上是一个控制对象
// clearInterval(计时器) : 关闭周期性计时器
var timer2 = setInterval(function(){
console.log(3);
},1000);
console.log("timer2:",timer2);
function closeTimerInterval(){
clearInterval(timer2);
}
</script>短信验证码案例
<input type="text">
<input type="button" value="获取验证码" id="btn">
<script>
var btnDom = document.querySelector("#btn")
btnDom.addEventListener("click",function getCode(){
var code = Math.ceil( Math.random()*10000 );
console.log(code);
// 禁用按钮 => 视觉禁止
btnDom.disabled = true;
var max = 5;
btnDom.value = max+"s后获取验证码"
// 彻底删除方法 => 功能禁用
btnDom.removeEventListener("click",getCode);
// 倒计时
// setTimeout(function(){
// btnDom.disabled = false;
// btnDom.addEventListener("click",getCode)
// }, 3000);
var i = 1;
var timer = setInterval(function(){
console.log("计时器");
btnDom.value = (max-i)+"s后获取验证码";
if(i>=max){
btnDom.disabled = false;
btnDom.addEventListener("click",getCode);
btnDom.value = "获取验证码"
clearInterval(timer);
}
i++;
},1000)
})
</script>
计时器元素动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ball{
padding: 0px;
width: 50px;
height: 50px;
background-color: brown;
border-radius: 50%;
margin-left: 0px;
margin-top: 10px;
}
.ball1{
/* 不能分段执行的动画 */
transition:all 3s ease;
}
.right{
width: 30px;
height: 30px;
margin-left: 400px;
background-color: blueviolet;
/* display: none; */
/* visibility: hidden; */
}
.ball2{
animation:move2 3s ease forwards;
}
/* @keyframes 时间为主先分段，样式为辅看定义 */
@keyframes move2 {
0%{
/* 0s样式-动画执行前的初始样式 => 可不写 */
width: 50px;
height: 50px;
margin-left: 0px;
background-color: brown;
}
50%{
/* 1.5s样式 */
margin-left: 400px;
width: 30px;
height: 30px;
background-color: brown;
}
100%{
/* 3s样式-动画执行后的最终样式 => 可不写 */
background-color: blueviolet;
width: 30px;
height: 30px;
margin-left: 400px;
}
}
</style>
</head>
<body>
<input type="button" value="添加样式ball1" onclick="moveFun1()">
<input type="button" value="添加样式ball2" onclick="moveFun2()">
<!-- 复习CSS动画 -->
<!-- CSS动画，通过特性元素规则触发的动画 -->
<div class="ball ball1" id="ball1"></div>
<div class="ball" id="ball2"></div>
<div class="ball ball2" ></div>
<script>
function moveFun1(){
var ballDom = document.querySelector("#ball1");
ballDom.classList.add("right")
}
function moveFun2(){
var ballDom = document.querySelector("#ball2")
ballDom.classList.add("ball2")
}
</script>
<hr>
<input type="button" value="基于计时器的动画" onclick="moveFun3()">
<div class="ball" id="ball3"></div>
<!-- 优先CSS -->
<script>
function moveFun3(){
var ballDom = document.querySelector("#ball3");
// ballDom.style.marginLeft = "100px";
// setTimeout(function(){
// ballDom.style.marginLeft = "101px";
// },20)
var start = 0;
ballDom.style.marginLeft = start+"px";
var timer = setInterval(function(){
start++;
if(start==200){
alert("动画执行一半")
}
if(start>=400){
clearInterval(timer);
ballDom.style.display = "none";
}else{
ballDom.style.marginLeft = start+"px";
}
},8)
}
</script>
</body>
</html>同步代码和异步代码
<input type="button" value="执行同步代码" onclick="execFunA()">
<input type="button" value="执行异步代码" onclick="execFunB()">
<script>
// 同步代码：代码按照顺序执行，前置代码没有完成，后续代码无法执行
// console.log(1);
// console.log(2);
// console.log(3);
// var res = num + 10;
// console.log(4);
// console.log(5);
// console.log(6);
// console.log(7);
function execFunA(){
console.log(1);
console.log(2);
console.log(3);
var res = num + 10;
console.log(4);
console.log(5);
console.log(6);
console.log(7);
}
// 异步代码：按照代码顺序加载代码，但代码会延迟执行，且不会影响后续代码的执行
// 异步内部的执行代码依然同步规则
// 异步代码的回调方法，无法通过 return 返回结果
// console.log(11);
// console.log(22);
// setTimeout(function(){
// console.log("计时器异步代码1");
// var res2 = arg + 10;
// console.log("计时器异步代码2");
// },1000);
// console.log(33);
// console.log(44);
function execFunB(){
console.log(11);
console.log(22);
setTimeout(function(){
console.log("计时器异步代码1");
var res2 = arg + 10;
console.log("计时器异步代码2");
},1000);
console.log(33);
console.log(44);
}
</script>
location对象
<h1 id="abc">头部</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#abc">回到顶部</a>
<h1 id="end">底部</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
// location 对象记录当前页面在浏览器地址中的指向路径
// 地址指向路径 => 域名
// 域名的组成 => URL 统一资源定位符
// protocol: // hostname[:port] / path / path / resource #anchor ?query
// 协议: // 域名(ip:端口) / 路径-资源 #锚点 ?参数
//
// + 协议://域名(ip:端口)/路径-资源 => 访问指定服务器的相关文件
// + #锚点 => 将访问的HTML页面滚动到对应的ID指向的标签
console.log(location);
function gotoPage(){
var num = Math.random();
console.log(num);
if(num>0.5){
// 改变浏览器窗口的地址
location.href = "https://www.baidu.com";
}
}
</script>
<hr>
<input type="button" value="切换页面" onclick="gotoPage()">
<br><br>
<!-- 参数 不合法 -->
<a href="./16.跳转查寻参数页面.html?第一段文本">跳转到 16.跳转查寻参数页面.html-第一段文本</a>
<br>
<a href="./16.跳转查寻参数页面.html?第二段文本">跳转到 16.跳转查寻参数页面.html-第二段文本</a>
<br>
<!--
参数规则和格式
?名称1=参数1&名称2=参数2&……
?key=value&key=value
地址和参数之间通过 ? 分割
参数和参数之间通过 & 分割
参数名和参数值之间通过 = 分割
-->
<a href="./16.跳转多查询参数.html?name=张三&age=23">跳转到 16.跳转多查询参数.html?name=张三&age=23</a>跳转查询页面参数
<h3>跳转到页面，用于参数解析</h3>
<h4 id="title">内容-？？？？</h4>
<script>
console.log(location);
console.log(location.href);
console.log( decodeURI(location.href) );
// location.search 当前页面访问时，地址栏中?后续的参数数据
// => location 中记录的数据不能出现非英文和符号以外其它字符
// 如果存在其它字符串，该字符会被编码成ISO8859-1规则
// 提供解码和编码方法
// decodeURI( 编码后的字符 ) 解码都只会对不地址栏不识别的字符进行操作
// encodeURI( 原始字符 ) 编码都只会对不地址栏不识别的字符进行操作
console.log(location.search);
var word = decodeURI( location.search );
console.log(word);
word = word.replace("?","");
console.log(word);
var titleDom = document.querySelector("#title");
titleDom.innerHTML = "内容-" + word;
</script>
跳转多查询参数
<h1>解析参数</h1>
<script>
// 获取地址参数，并解码
var search = decodeURI( location.search );
console.log(search);
// 删除参数开始的 ? 分割符
search = search.replace("?","");
// 分割多个参数
var params = search.split("&");
console.log(params);
var obj = {};
for (var i = 0; i < params.length; i++) {
var p = params[i].split("=");
console.log(p);
console.log(p[0]);
console.log(p[1]);
obj[ p[0] ] = p[1];
}
console.log(obj);
</script>