版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_26765193/article/details/83350656
一、DHTML 概述
1. DHTML 简介
DHTML 通过操作 HTML 以创造各种动态视觉效果,是一种浏览器端的动态网页技术。
(1). DHTML 的功能
动态改变页面元素
- 与用户进行交互
- DHTML 对象模型包括浏览器对象模型和 DOM 对象模型
2. DHTML对象模型
3. BOM 与DOM
- BOM :浏览器对象模型,用来访问和操纵浏览器窗口,使JavaScript 有能力与浏览器“对话”。
- 通过使用BOM,可移动窗口、更改状态栏文本、执行其他不与页面内容发生直接联系的操作
- 没有相关标准,但被广泛支持
- DOM:文档对象模型,用来操作文档
- 定义了访问和操作 HTML 文档的标准方法
- 应用程序通过对 DOM 树的操作,来实现对 HTML 文档数据的操纵
二、window 对象
1. window 对象表示浏览器窗口
- 所有JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
2. 常用属性
- document:窗口中显示的 HTML 文档对象
- history:浏览过窗口的历史记录
- location:窗口文件地址
- name:窗口名称
- opener:打开当前窗口的 window 对象
3. 常用方法
- alert()、confirm、prompt():对话框
- close()、open():关闭、打开窗口
- focus()、blur():窗口获得焦点或者失去焦点
- moveBy()、moveTo():移动窗口
- resizeBy()、resizeTo():调整窗口大小
- scrollBy()、scrollTo():滚动窗口中网页的内容
三、窗口和对话框
1. 对话框
- alert(str):提示对话框,显示str 字符串的内容
- confirm(str):确认对话框,显示str 字符串的内容;按“确定”按钮返回 true,其他操作返回 false
- prompt(str,value):输入对话框,采用文本框输入信息;str 为提示信息,value 为初始值;按“确定”按钮返回输入值,其他返回 undefined
2. 窗口的打开与关闭
- window.open([url],[name],[config]):
- url:打开的超链接
- name:窗口的名称
- config:窗口的配置参数
- 返回新窗口对象
- window.close()
var config = "toolbar=yes,location=no,width=500,height=300";
//打开窗口
var openurl = "http://www.baidu.com";
var newWindow = window.open(openurl,"popwindow",config);
四、定时器
- 多用于网页动态时钟、制作倒计时、跑马灯效果等
- 周期性时钟:以一定的时间间隔执行代码,循环重复
- 一次性时钟:在一个设定的时间间隔之后执行代码,不是在函数被调用之后立即执行
1. 周期性定时器
- setInterval(exp,time):周期性触发代码exp
- exp:要执行的语句
- time:时间周期,单位为毫秒
- 返回已经启动的定时器对象
- clearInterval(tID):停止启动的定时器
- tID:启动的定时器对象
window.setInterval("alert('hello');",3000);
//或者
window.setInterval(func,3000);
function func(){
alert("hello");
}
2. 一次性定时器
- setTimeout(exp,time):一次性触发代码exp
- clearTimeout(tID):停止启动的定时器
window.setTimeout("alert('hello');",3000);
//或者
window.setTimeout(func,3000);
function func(){
alert("hello");
}