同域名网站改版需要把之前网站里的文章都拷贝过来吗?,python做网站比php,织梦做的网站老是被黑,长沙网站开发智能文章目录 目录 文章目录 本章要求 一.BOM模型概述 二.BOM核心#xff1a;window对象 常用属性 常用方法#xff1a; confirm() 案例 open ()close()案例 setTimeout( ) 案例 setInterval( ) 案例 document对象 练习 本章要求
了解BOM模型掌握BOM模型实际应用 一.BOM模型… 文章目录 目录 文章目录 本章要求 一.BOM模型概述 二.BOM核心window对象 常用属性 常用方法 confirm() 案例 open ()close()案例 setTimeout( ) 案例 setInterval( ) 案例 document对象 练习 本章要求
了解BOM模型掌握BOM模型实际应用 一.BOM模型概述 BOM浏览器对象模型是JavaScript中的一个重要概念它提供了一组用于控制浏览器窗口和页面内容的对象和方法。
BOM可实现功能
弹出新的浏览器窗口 移动、关闭浏览器窗口以及调整窗口的大小页面的前进、后退 二.BOM核心window对象 window对象表示浏览器窗口或框架。它是BOM的顶层对象包含了浏览器窗口的各种属性和方法比如窗口大小、位置、打开新窗口等。 常用属性 history 属性 history属性是一个表示浏览器历史记录的对象。通过history属性可以使用JavaScript执行以下操作返回上一个页面进入下一个页面获取历史记录长度等等。 location属性 location属性表示当前文档的URL地址。它提供了访问和操作URL的方法。 通过上述属性实现的功能和浏览器左上角前进后退刷新等按钮一致。 案例
!DOCTYPE html
html
head langenmeta charsetUTF-8
title主页面/title
style typetext/css
body{margin: 0px auto;text-align:center;
}
/style
/head
body
img srcimages/flow.jpg alt鲜花 /br /
a hrefjavascript:history.back()返回主页面/a/p!--返回上一级页面--
a hrefjavascript:location.hrefflower.html查看鲜花详情/a
a hrefjavascript:location.reload()刷新本页/a!--点击重新加载本页面--
/body
/html
常用方法 针对window对象的常用方法是对浏览器窗口进行一系列操作例如点击某个按钮关闭关闭某页面时需要再次确认等等这些都可以通过下面的常用方法实现。 prompt() 以及alert()案例在前文基础篇中有详细介绍此处不做过多赘述重点讲解剩余几种 confirm() 案例 confirm() :显示一个带有提示信息确定和取消按钮的对话框。 语法
window.confirm(提示信息)
script typetext/javascriptvar flag window.confirm(确认要关闭这个页面嘛)if(flag true){window.alert(正在关闭页面请稍后...);}else{window.alert(已取消关闭...);}
/script open ()close()案例 open ()打开一个新的浏览器窗口加载给定 URL 所指定的文档。 close()关闭浏览器页面 语法
window.open(弹出窗口的url)
bodyscript typetext/javascriptfunction open_index(){window.open(open.html);}function close_index(){window.close();}/scriptinput typebutton value点击此处调用open函数打开新页面 onclickopen_index()/input typebutton value点击此处关闭页面 onclickclose_index()/
/body setTimeout( ) 案例 在指定的毫秒数后调用函数或计算表达式。 语法
window.setTimeout(调用的函数,毫秒数);
案例
bodyp此页面等待5秒后自动跳转.../pscript typetext/javascriptfunction fun1(){document.write(这是5秒后执行的函数页面);}window.setTimeout(fun1(),5000);/script
/body setInterval( ) 案例 按照指定的周期以毫秒计来调用函数或表达式 语法
window.setInterval(调用的函数,毫秒数);
案例
bodyp此页面等待3秒后自动跳转.../pscript typetext/javascriptfunction fun1(){document.write(这是3秒后执行的函数页面);}window.setInterval(fun1(),3000);/script
/body document对象 CSS中选择器代表站在CSS角度去找html文档中的标签document对象则是站在javascript角度去找html文档中的标签。简单来说document是JS中的选择器。 通过referrer()返回含有当前问文档的URL 案例
领奖页面代码 下面的代码中含有 hrefpraise.html 即该URL含有奖品显示页面文档因此当点击超链接跳转时奖品显示页面会导入领奖页面的URL此时if 语句中URL不为空页面将显示 ”大奖赶快拿啦笔记本数码相机 字样。 !DOCTYPE html
html
head langenmeta charsetUTF-8title领奖页面/titlestyle typetext/cssbody,h1{margin: 0;padding: 0;}.prize{text-align: center;}/style
/head
body
div classprizeimg srcimages/d1.jpg alt中奖 /h1a hrefpraise.html马上去领奖啦/a/h1
/div
/body
/html
奖品显示页面代码 直接运行后未载入本页面文档地址URL问空将显示您不是从领奖页面进入5秒后将自动跳转到登录页面 !DOCTYPE html
html
head langenmeta charsetUTF-8title奖品显示页面/titlestyle typetext/cssbody{margin: 0;}/style
/head
bodyscript typetext/javascriptvar url document.referrer; //载入本页面文档的地址从哪来的if(url ){document.write(h2您不是从领奖页面进入5秒后将自动跳转到登录页面/h2);//新技术点(定时函数)window.setTimeout(location.hreflogin.html,5000); }else{document.write(h2大奖赶快拿啦笔记本数码相机/h2);}/script
/body
/html
定时函数跳转页面代码 5s后自动跳转到该页面 !DOCTYPE html
html
head langenmeta charsetUTF-8title登录页面/titlestyle typetext/cssbody{margin: 0;}/style
/head
body
img srcimages/login.jpg alt登录图片/
/body
/html 练习
