【JavascriptDay19】BOM
- 人工智能
- 2025-08-29 15:24:02
目录
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 = " .baidu "; } } </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>
【JavascriptDay19】BOM由讯客互联人工智能栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“【JavascriptDay19】BOM”
![[MonoDepth/3DOD]单目3D检测基础](/0pic/pp_22.jpg)
