六安网站线上引流多少钱,国外有建站公司吗,网页制作html完整代码,公司管理目录 一#xff0c;BOM模型1.1#xff0c;BOM可实现功能 二#xff0c;Window对象的常用属性2.1#xff0c;Window对象的常用方法2.1-1#xff0c;open()和close()方法 三#xff0c;History对象四#xff0c;Location对象五#xff0c;Document对象的常用方法六#… 目录 一BOM模型1.1BOM可实现功能 二Window对象的常用属性2.1Window对象的常用方法2.1-1open()和close()方法 三History对象四Location对象五Document对象的常用方法六定时函数6.1清除函数 七写了一个小游戏 模拟小球移动最后 一BOM模型
BOM提供了独立于内容的、可与浏览器窗口进行互动的对象结构 BOM浏览器对象模型Browser Object Model
1.1BOM可实现功能
弹出新的浏览器窗口 移动、关闭浏览器窗口以及调整窗口的大小 页面的前进、后退
二Window对象的常用属性
表示浏览器中打开的窗口 常用的属性 这里面有Window所有对象我这截图不全里面带f的是函数不带的是属性
属性名称说 明history有关客户访问过的URL的信息location有关当前 URL 的信息screen只读属性包含客户端显示屏幕的信息
语法 window.属性名 属性值; 返回这个点击直接跳转百度页面
screen.width 返回浏览器屏幕的宽度单位为像素;
2.1Window对象的常用方法
常用的方法
方法名称说 明prompt( )显示可提示用户输入的对话框alert( )显示带有一个提示信息和一个确定按钮的警示框confirm( )显示一个带有提示信息、确定和取消按钮的对话框close( )关闭浏览器窗口open( )打开一个新的浏览器窗口加载给定 URL 所指定的文档setTimeout( )在指定的毫秒数后调用函数或计算表达式setInterval( )按照指定的周期以毫秒计来调用函数或表达式clearTimeout( )用于停止执行setTimeout( )方法的函数代码clearInterval( )用于停止 setInterval( ) 方法执行的函数代码
2.1-1open()和close()方法
bodydivinput typebutton value打开窗口 onclickopenwin()/inputinput typebutton value关闭窗口 onclickclosewin()/div/body
scriptfunction openwin(){window.open(https://www.baidu.com.cn,win1)}function closewin(){window.close()}
/scriptVideo_20230822152329 第一个按钮可以打开窗口第二个按钮可以关闭窗口
窗口特征的一些属性
属性名称说 明height、width窗口文档显示区的高度、宽度以像素计left、top窗口的x坐标、y坐标以像素计toolbaryes no 1 0是否显示浏览器的工具栏黙认是yesscrollbarsyesno10是否显示滚动条黙认是yeslocationyesno10是否显示地址地段黙认是yesstatusyesno10是否添加状态栏黙认是yesmenubaryesno10是否显示菜单栏黙认是yesresizableyesno10窗口是否可调节尺寸黙认是yestitlebaryesno10是否显示标题栏黙认是yesfullscreenyesno10是否使用全屏模式显示浏览器黙认是no。处于全屏模式的窗口必须同时处于剧院模式
三History对象
保存用户上网的历史记录可通过window.history属性访问
常用属性和方法
类别名称说明属性length返回历史记录列表中的网址数方法back()加载 History 对象列表中的前一个URL方法forward()加载 History 对象列表中的下一个URL方法go()加载 History 对象列表中的某个具体URL bodydivinput typebutton value跳转窗口 onclickgotodemo01()/div/body
scriptfunction gotodemo01(){window.location.hrefdemo01.html}
/scriptVideo_20230822152033 bodydivinput typebutton value打开窗口 onclickopenwin()/inputinput typebutton value关闭窗口 onclickclosewin()input typebutton value跳转窗口 onclickgotodemo01()input typebutton value前进 onclickqinajin()/div/body
scriptfunction openwin(){window.open(https://www.baidu.com.cn,win1)}function closewin(){window.close()}function gotodemo01(){window.location.hrefdemo01.html}function qinajin(){window.history.forward();}
/scriptbodypasserbydivinput typebutton value后退 onclickgoblock()/div
/body
scriptfunction goblock(){window.history.back();}
/scriptVideo_20230822152919 四Location对象
包含有关当前URL的信息可通过window.location属性访问
常用属性
名称说 明host设置或返回主机名和当前URL的端口号hostname设置或返回当前URL的主机名href设置或返回完整的URL
常用方法
名称说 明reload()重新加载当前文档replace()用新的文档替换当前文档 五Document对象的常用方法
Document对象代表整个HTML文档 Document对象的常用方法
名 称说 明唯一getElementById()返回对拥有指定id的第一个对象的引用对象的id唯一getElementsByName()返回带有指定名称的对象的集合相同name属性getElementsByTagName()返回带有指定标签名的对象的集合相同的元素write()向文档写文本、HTML表达式或JavaScript代码
写了一个小例子
!DOCTYPE html
htmlhead langenmeta charsetUTF-8title使用document对象操作页面/titlestyle typetext/cssbody,input,div,p{margin: 0;padding: 0;}body {font-size: 14px;font-family: 微软雅黑;line-height: 25px;}.content {width: 600px;margin: 30px auto;}.content img {float: left;width: 180px;}.r {float: right;width: 400px;}input[namechangephone] {width: 100px;height: 28px;line-height: 28px;text-align: center;font-size: 14px;font-family: 微软雅黑;margin: 10px 0 10px 0;}input[namesize] {width: 50px;text-align: center;}#replace {border: 1px solid rgb(179, 179, 179);height: 60px;}/style
/headbodydiv classcontentimg srcimages/pro4.jpg alt18Plus /div classr产品名称span idphone12318 Plus/span brinput namechangephone value更换产品名称 typebutton onclickchangeName(); /br规格选择input namesize typetext value64G /input namesize typetext value128G /input namesize typetext value256G /input namesize typetext value512G /brinput nameb2 typebutton valueinput内容 onclickall_input() /input nameb3 typebutton value所有规格 onclicks_input() /input nameb4 typebutton value清空页面内容 onclickclearAll() /p idreplace/p/div/divscript typetext/javascriptfunction changeName(){document.getElementById(phone123).innerHTMLABC}function all_input(){var inputArray document.getElementsByTagName(input);var inputHtml ;for(var i0; iinputArray.length; i){var myinput inputArray[i];inputHtml inputHtml myinput.value ;}document.getElementById(replace).innerHTMLinputHtml;}function s_input(){var inputArray document.getElementsByName(size);var inputHtml ;for(var i0; iinputArray.length; i){var myinput inputArray[i];inputHtml inputHtml myinput.value ;}document.getElementById(replace).innerHTMLinputHtml;}function clearAll(){document.getElementById(replace).innerHTML;}/script
/body/htmlVideo_20230822170835 六定时函数
超时调用setTimeout()
window.setTimeout(调用的函数, 等待的毫秒数);间歇调用setInterval()
window.setInterval(调用的函数, 间隔的毫秒数);示例
!-- 加载完执行的事件 --
body onloadinit()/body
scriptfunction init(){setTimeout(fun1(),3000);// 3秒(3000毫秒)后执行fun1()函数一次setInterval(fun2(),2000)// 每隔2秒(2000毫秒)执行一次fun2()函数}function fun1(){console.log(1);}function fun2(){console.log(2);}
/scriptVideo_20230822172316 6.1清除函数
clearTimeout()
clearTimeout(setTimeOut()返回的ID值)clearInterval()
clearInterval(setInterval()返回的ID值)示例
!-- 加载完执行的事件 --
body onloadinit()input typebutton value停止 onclickstopInterval()input typebutton value开始 onclickstartInterval()/body
scriptvar intervalIndex;function init(){setTimeout(fun1(),3000);// 3秒(3000毫秒)后执行fun1()函数一次intervalIndex setInterval(fun2(),2000)// 每隔2秒(2000毫秒)执行一次fun2()函数}function fun1(){console.log(1);}function fun2(){console.log(2);}function stopInterval(){clearInterval(intervalIndex)}function startInterval(){intervalIndex setInterval(fun2(),2000)// 每隔2秒(2000毫秒)执行一次fun2()函数}
/scriptVideo_20230822173613 七写了一个小游戏 模拟小球移动
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style#box{border: 1px sandybrown solid;height: 100px;width: 100px;text-align: center;line-height: 100px;border-radius: 50px;position: absolute;left: 100px;}
/style
body div idbox点击开始/div
/body
script// 绑定点击事件/*** 1.画静态页面* 2.绑定点击事件* 3.点击一次移动导固定位置点一次移动一次* 4.点击一次在原有的基础上移动固定位置点一次移动一次* 5.点击一次持续移动* 6.点击后能判断出是要停止还是移动* 7.在停止的对应的代码上停止循环* **/var boxDom document.getElementById(box);// 创建一个绑定事件boxDom.addEventListener(click,isMove);var intervalIndex; function isMove(){var boxHtml boxDom.innerHTML // Div文字内容if(boxHtml点击停止){// 停止循环clearInterval(intervalIndex);boxDom.innerHTML点击开始}else{// 开始循环intervalIndex setInterval(Move(),10)}}// 方法调用一次移动1pxfunction Move(){console.log(1);var leftVal window.getComputedStyle(boxDom).left;console.log(leftVal);leftVal parseInt(leftVal);leftVal leftVal1;boxDom.style.left leftValpxboxDom.innerHTML点击停止}
/script
/htmlVideo_20230822175824 最后
送大家一句话变好的过程都不太舒服试试在努力点
