西安网站设计公司,丹阳网站建设价格,望野千枝叶,东莞小程序开发解决方案BOM是什么#xff1f;
Browser Object Model是浏览器对象模型
官方#xff1a;浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构#xff0c;BOM由多个对象构成#xff0c;其中代表浏览器窗口的window对象是BOM的顶层对象#xff0c;其他对象都是该…BOM是什么
Browser Object Model是浏览器对象模型
官方浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构BOM由多个对象构成其中代表浏览器窗口的window对象是BOM的顶层对象其他对象都是该对象的子对象
人话用来获取或设置浏览器的相关的属性、行为例如新建窗口、获取屏幕分辨率、浏览器版本号、浏览器提示语句、粘贴复制…… BOM有什么作用
获取或设置屏幕的分辨率、禁止浏览器粘贴复制…… BOM和DOM有什么区别
BOM浏览器对象模型获取或设置浏览器的属性
DOM文档对象模型获取或设置文档中标签的属性例如获取或设置input表单的value值、节点的增删改查对标签的一些具体操作 BOM有什么缺陷
不具备浏览器兼容性 BOM里面有什么
window对象全局对象
confirm
location
screen
history
事件对象 注window就是一个全局的对象Global是一个全局的容器。所有的东西都是它的成员 window对象
1、弹窗
①、确认框confirm
window.confirm(sometext);用于验证是否接收用户操作“确认”返回true“取消”返回false
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlescript typetext/javascriptonload function () {btn.onclick function () {var res window.confirm(测试消息请选择); //弹出提示框alert(res);};};/script
/head
bodyinput typebutton namename valueclick idbtn /
/body
/html②、警告框alert
用于确保用户可以得到某些信息当警告窗出现后用户需要点击确定按钮才能继续进行操作。
window.alert(sonetext); ③、提示框prompt
用于提示用户进入页面前输入某个值。
!DOCTYPE html
html
head
meta charsetutf-8
title菜鸟教程(runoob.com)/title
/head
bodyp点击按钮查看输入的对话框。/p
button onclickmyFunction()点我/button
p iddemo/p
script
function myFunction(){var x;var personprompt(请输入你的名字,Harry Potter);if (person!null person!){x你好 person ! 今天感觉如何?;document.getElementById(demo).innerHTMLx;}
}
/script/body
/html 2、reload方法刷新
Window.location.hrefurl//href获得或返回页面所在地址
Window.location.reload(); screen对象
获取屏幕分辨率width、height
scriptonload function () {alert(您的屏幕分辨率是 this.screen.width * this.screen.height);}
/script history对象
包含浏览器历史与浏览器前进后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同。go(1)参数表示跳转页面的个数表示前进一个页面
history.back() - 与在浏览器点击后退按钮相同。go(-1)表示页面跳转的个数表示后退一个页面
history.go(0);表示刷新页面 实战 history1.html
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlescript typetext/javascriptonload function () {btn.onclick function () {history.forward();//history.go(1);};};/script
/head
bodya href06 history2.htmlhistory对象跳转/abr /input typebutton namename idbtn value- /
/body
/htmlhistory2.html
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlescript typetext/javascriptonload function () {btn.onclick function () {history.back();//history.go(-1);};};/script
/head
bodyinput typebutton namename idbtn value- /
/body
/htmlLocation对象
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 80 或 443
location.protocol 返回所使用的 web 协议http: 或 https: 事件对象
1、C#、js对比
C#中 js中
2、什么是事件对象
用来记录一些事件发生时的相关信息的对象比方说点击按钮时用的哪个鼠标、在屏幕什么位置等等 3、如何编程
事件是一个待执行方法不是我们去调用而是浏览器。因某个事情的触发而自动的调用。 4、语法
事件 function{ }
这个函数是由浏览器自己调用那么事件的参数也与浏览器有关。火狐浏览器会在调用事件执行方法的时候传入一个参数表示事件对象。
所以我们的代码需要修改成
事件function(e{ }
早期的IE浏览器实际上现在的IE也保留没有这个参数 5、常用成员
鼠标坐标screenX、screenY 与浏览器页面区域左上角为原点 clientX、clientY 与浏览器页面区域左上角为原点 layerX、layerY 与div左上角为原点
鼠标按键button
功能键altKey、ctrlKey、shiftKey表示事件发生时键被按下并保持为false则键没有按下反之
鼠标事件onmouseover、onmouseout
onmouseover: 事件会在鼠标指针移动到指定的元素上时发生onmouseout: 事件会在鼠标指针移出指定的对象时发生。 实战
①、点击鼠标左中右键出现不同数字
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlescriptonload function () {//获取body标签的所有元素中的第一个并且用变量名controls接收var controls document.getElementsByTagName(body)[0].getElementsByTagName(*);//遍历数组for (var i 0; i controls.length; i) { controls[i].onmousedown function (e) { //onmousedown左键0 滚轮1 右键2//controls[i].onclick function (e) { //onclick点击鼠标右键出现浏览器菜单选项不能显示2alert(e.button);//alert(点击);};}}/script
/head
bodyinput typebutton namename value点击/div styleborder:solid 1px red;width:40px;height:20px /div
/body
/html ②、鼠标坐标
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlescript typetext/javascriptonload function () {document.onmousemove function (e) {//将坐标的结果显示在Title标签中document.title e.screenX , e.screenY;document.title e.clientX , e.clientY;//以上都是以浏览器为对照};//以div标签为准dv.onmousemove function (e) {//document.title e.layerX , e.layerY;//this就是红框//offset表示document.title (e.layerX - this.offsetLeft) , (e.layerY - this.offsetTop);};};/script
/head
bodydiv iddv styleborder: solid 1px red;width:100px;height:100px;margin:0 auto/div
/body
/html ③、功能键
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlescriptonload function () {window.btn.onclick function (e) {e e || event;alert(alt e.altKey ,shift e.shiftKey ,control e.ctrlKey);};};/script
/head
bodyinput typebutton idbtn value点击 /
/body
/html 计时事件
计时器setInterval() - 间隔指定的毫秒数不停地执行指定的代码
创建number window.setInterval“javascript函数”milliseconds;每隔指定毫秒后调用一次回调函数返回一个我觉得有点循环执行的意思
关闭windo.clearInterval计时器Id 延时器setTimeout() - 在指定的毫秒数后执行指定代码
创建number window.setTimeout(callback,millisecond);等待指定时间调用回调函数注意只会执行一次返回的是延时器id
关闭clearTimeout延迟其Id 实战
计时器
第一种方法
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlescript typetext/javascriptonload function () {//第一种方法//页面一开始加载就显示时间然后每隔一秒钟更新一次时间window.date.innerHTML new Date().toLocaleString();//window.date.innerHTML:这个窗体的span标签里添加文本//new Date().toLocaleString()实例化一个Date对象根据本地时间把Date对象转换为字符串并返回结果var intervalId setInterval(function () {window.date.innerHTML new Date().toLocaleString();}, 1000);//setTimeout()在指定的毫秒数后调用函数或计算表达式。每隔1000毫秒调用一次function函数//button按钮点击事件document.getElementById(btn).onclick function () {if (this.value 点击停止) {clearInterval(intervalId); //停止执行this.value 点击开始;} else {intervalId setInterval(function () { //继续执行window.date.innerHTML new Date().toLocaleString();}, 1000);this.value 点击停止;}};};/script
/head
bodyp现在时刻span iddate/span/pinput typebutton idbtn namename value点击停止 /
/body
/html
第二种方法
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlescript typetext/javascript//第二种方法onload function () {window.date.innerHTML new Date().toLocaleString();var isRun true; //设置一个布尔类型变量isRun默认为true//创建一个计时器每个一秒调用一次function这个函数var intervalId this.setInterval(function () { if (isRun) {window.date.innerHTML new Date().toLocaleString();}}, 1000);//button按钮单击事件this.document.getElementById(btn).onclick function () {if (this.value 点击停止) {isRun !isRun; //isRun为false停止执行this.value 点击开始;} else {isRun !isRun;this.value 点击停止;}//第三种方法//isrun !isRun;//this.value 点击 开始停止.split(,)[Number(isRun)];}};/script
/head
bodyp现在时刻span iddate/span/pinput typebutton idbtn namename value点击停止 /
/body
/html 倒数跳转10秒倒计时跳转到其他页面
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlescriptonload function () {//this.window.date.innerHTML new Date().toLocaleString();var span document.getElementById(second);var intervalId setInterval(function () {var num span.innerHTML - 1; //获得或设置一个标签下的内容。这个内容可以是html格式的span.innerHTML num; //显示秒数if (num 0) { ////停下计时器clearInterval(intervalId);//跳转页面location.href https://www.runoob.com/jsref/met-win-setinterval.html;}}, 1000);};/script
/head
bodyp请等待span idsecond10/span秒后跳转/p
/body
/html 延时器
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlescript typetext/javascript//思路鼠标每上抬一次就执行一次交换创建一次延时器onload function () {var txt1 this.document.getElementById(txt1);var txt2 this.document.getElementById(txt2);var timeoutId;txt2.onkeyup function () {//关闭旧的演示clearTimeout(timeoutId); //如果已经关闭或没有数据这句话无效//开启新的延时timeoutId setTimeout(function () {txt1.value txt2.value;}, 500);};};/script
/head
bodyinput typetext namename value idtxt1 /br /br /br /input typetext namename value idtxt2 /
/body
/html clipboardData对象—剪贴板
设置值clipboardData.setData(text,value);
获取值 clipboardData.getData(text);
清除值clipboardData.clearData(text);
oncopy事件、onpaste事件、oncut事件 实战
获取、设置值
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle/stylescript typetext/javascriptonload function () {document.getElementById(btncopy).onclick function () {var url location.href;//放入剪贴板:ie才能生效window.clipboardData.setData(text, url);};//获取剪贴板内容this.document.getElementById(btnget).onclick function () {var txt window.clipboardData.getData(text);document.getElementById(txt).value txt;};};/script
/head
bodyinput typebutton namename value点击复制网址 idbtncopy /br /textarea idtxt stylewidth:300px;height:300px /textareainput typebutton namename value获取剪贴板内容 idbtnget /br /
/body
/html
禁止复制、禁止粘贴、复制添加版权案例
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/css#dv {position: absolute;left: 0;top: 0;right: 0;bottom: 0;}/stylescript typetext/javascriptonload function () {document.onkeydown function (e) {/* alert(e.key , e.keyCode);*/return false;}document.onkeyup function (e) {//alert(e.key , e.keyCode);return false;}document.onkeypress function (e) {//alert(e.key , e.keyCode);return false;}}/script
/head
bodyp美文美文美文美文/pp美文美文美文美文/pp美文美文美文美文/pp美文美文美文美文/pp美文美文美文美文/pp美文美文美文美文/pp美文美文美文美文/pp美文美文美文美文/pp美文美文美文美文/pp美文美文美文美文/p
/body
/html 项目实战—动画案例
高度变化
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle#dv {height: 200px;width: 200px;border: solid 1px red;overflow: hidden; /*超出这个范围就隐藏掉*/}/stylescriptonload function () {this.document.getElementById(btn).onclick function () {//节点.style.样式var div document.getElementById(dv);第一种思路//首先获得高度var h div.offsetHeight; //单位就是数字.offsetHeight返回元素的高度var intervalId setInterval(function () {h--;if (h 0) {clearInterval(intervalId);//隐藏这个框div.style.display none;}div.style.height h px;}, 40);//第二种思路让操作有速度。var intervalId setInterval(function () {var h parseInt(div.style.height || div.offsetHeight)var delta Math.ceil(h / 10); //每次应该减去的高度h h - delta;if (h 0) {clearInterval(intervalId);//隐藏这个框div.style.display none;}div.style.height h px;}, 20);};};/script
/head
bodyinput typebutton namename value点击 idbtndiv iddvp111111111/pp111111111/pp111111111/pp111111111/pp111111111/pp111111111/p/div
/body
/html
位置变化
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle#dv {border: solid 1px red;width: 100px;height: 100px;background-color: red;}/stylescriptonload function () {var dv this.document.getElementById(dv);document.getElementById(btn).onclick function () {//x:800,y:500//平移//创建计时器var intervalId setInterval(function () {//获取div标签的左边距var currentX parseInt(dv.style.left || dv.offsetLeft);//每次应该减去的高度var delta Math.ceil((800 - currentX) / 10);var finalX currentX delta;if (finalX 800) {clearInterval(intervalId); //停止计时器}dv.style.left finalX px;}, 20);};};/script
/head
bodyinput typebutton namename value点击移动 idbtndiv iddv/div
/body
/html
