网站权重2的网站,百度一下官方网址,天元建设集团有限公司第六建筑工程公司,中国500强排名一览表目录
BOM对象的方法
定时器方法
短信验证码案例
计时器元素动画
同步代码和异步代码
location对象
跳转查询页面参数
跳转多查询参数 BOM对象的方法
// window.alert(提示);// window 中提供的方法和属性#xff0c;可以在省略window对象的情况下直接调用…目录
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 typebutton value3s内关闭一次性计时器 onclickcloseTimeout()input typebutton value关闭周期计时器 onclickcloseTimerInterval()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 typetextinput typebutton value获取验证码 idbtnscriptvar 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 maxs后获取验证码// 彻底删除方法 功能禁用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(imax){btnDom.disabled false;btnDom.addEventListener(click,getCode);btnDom.value 获取验证码clearInterval(timer);}i;},1000)})/script 计时器元素动画
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
bodyinput typebutton value添加样式ball1 onclickmoveFun1()input typebutton value添加样式ball2 onclickmoveFun2()!-- 复习CSS动画 --!-- CSS动画通过特性元素规则触发的动画 --div classball ball1 idball1/divdiv classball idball2/divdiv classball ball2 /divscriptfunction moveFun1(){var ballDom document.querySelector(#ball1);ballDom.classList.add(right)}function moveFun2(){var ballDom document.querySelector(#ball2)ballDom.classList.add(ball2)}/scripthrinput typebutton value基于计时器的动画 onclickmoveFun3()div classball idball3/div!-- 优先CSS --scriptfunction moveFun3(){var ballDom document.querySelector(#ball3);// ballDom.style.marginLeft 100px;// setTimeout(function(){// ballDom.style.marginLeft 101px;// },20)var start 0;ballDom.style.marginLeft startpx;var timer setInterval(function(){start;if(start200){alert(动画执行一半)}if(start400){clearInterval(timer);ballDom.style.display none;}else{ballDom.style.marginLeft startpx;}},8)}/script
/body
/html 同步代码和异步代码 input typebutton value执行同步代码 onclickexecFunA()input typebutton value执行异步代码 onclickexecFunB()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 idabc头部/h1brbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbra href#abc回到顶部/ah1 idend底部/h1brbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrscript// 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(num0.5){// 改变浏览器窗口的地址location.href https://www.baidu.com;}}/scripthrinput typebutton value切换页面 onclickgotoPage()brbr!-- 参数 不合法 --a href./16.跳转查寻参数页面.html?第一段文本跳转到 16.跳转查寻参数页面.html-第一段文本/abra href./16.跳转查寻参数页面.html?第二段文本跳转到 16.跳转查寻参数页面.html-第二段文本/abr!-- 参数规则和格式?名称1参数1名称2参数2……?keyvaluekeyvalue地址和参数之间通过 ? 分割参数和参数之间通过 分割参数名和参数值之间通过 分割--a href./16.跳转多查询参数.html?name张三age23跳转到 16.跳转多查询参数.html?name张三age23/a
跳转查询页面参数
h3跳转到页面用于参数解析/h3h4 idtitle内容-/h4scriptconsole.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解析参数/h1script// 获取地址参数并解码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
