9.HTML5 JavaScript DHTML
来源：互联网 发布：化妆品真伪查询软件 编辑：程序博客网 时间：2024/04/30 00:23
1.DHTML模型
window对象
- navigator
- frames
- location
- history
- document
- all
- body
- forms
- elements
- anchors
- links
- images
- ...
- screen
<body id="bd"><a href="http://www.crazyit.org">疯狂Java联盟</a><br /><img id="lee" src="http://www.crazyit.org/logo.jpg"alt="疯狂Java联盟" /><br /><form><input type="text" name="user" value="文本框"/><br /><input type="button" id='bn' value="按钮"/></form><script type="text/javascript">// 访问body元素alert(document.body.id);// 访问第一个超链接alert(document.links[0].href);// 访问id或name为lee的图片alert(document.images['lee'].alt);// 访问页面的第一个表单form = document.forms[0];alert(form.innerHTML);// 访问表单里第一个元素alert(form.elements[0].value);// 访问表单里id或name为bn的元素alert(form.elements['bn'].value);// 下面的代码在Internet Explorer 6中可行alert(document.all['bn'].value);</script></body>
2.使用window对象
Window 对象属性
- screenLeft
- screenTop
- screenX
- screenY
Window 对象方法
要引用窗口中的一个框架，可以使用如下语法：
frame[i]//当前窗口的框架self.frame[i]//当前窗口的框架w.frame[i]//窗口 w 的框架
要引用一个框架的父窗口（或父框架），可以使用下面的语法：
parent//当前窗口的父窗口self.parent//当前窗口的父窗口w.parent //窗口 w 的父窗口
要从顶层窗口含有的任何一个框架中引用它，可以使用如下语法：
top//当前框架的顶层窗口self.top//当前框架的顶层窗口f.top//框架 f 的顶层窗口
新的顶层浏览器窗口由方法 Window.open() 创建。当调用该方法时，应把 open() 调用的返回值存储在一个变量中，然后使用那个变量来引用新窗口。新窗口的 opener 属性反过来引用了打开它的那个窗口。
一般来说，Window 对象的方法都是对浏览器窗口或框架进行某种操作。而 alert() 方法、confirm() 方法和 prompt 方法则不同，它们通过简单的对话框与用户进行交互。
<body id="bd"><a href="http://www.crazyit.org">疯狂Java联盟</a><br /><img id="lee" src="http://www.crazyit.org/logo.jpg" alt="疯狂Java联盟" /><br /><form><input type="text" name="user" value="文本框"/><br /><input type="button" id='bn' value="按钮"/></form><script type="text/javascript">// 访问body元素alert(document.body.id);// 访问第一个超链接alert(document.links[0].href);// 访问id或name为lee的图片alert(document.images['lee'].alt);// 访问页面的第一个表单form = document.forms[0];alert(form.innerHTML);// 访问表单里第一个元素alert(form.elements[0].value);// 访问表单里id或name为bn的元素alert(form.elements['bn'].value);// 下面的代码在Internet Explorer 6中可行alert(document.all['bn'].value);</script></body>
<script type="text/javascript">//修改窗口的状态栏文字。window.status="自定义状态栏文字";</script>
2.1 访问历史
- window.history.back（）
- window.history.foward（）
- window.history.go（intValue）前进或后退intValue。
2.2 访问页面URL
window.loaction.hostname：主机名称
window.loaction.href
window.loaction.host：主机地址
window.loaction.port
window.loaction.pathname：文件地址
window.loaction.protocol：装载该文档的协议
<script type="text/javascript">var loc = window.location;var locStr = "当前的location信息是:\n";// 遍历location对象的全部属性for (var propname in loc){locStr += propname + ": " + loc[propname] + "\n"}alert(locStr);</script>2.3 主机屏幕信息
<script type="text/javascript">alert(window.screen);var str = "当前的屏幕信息是:\n";// 遍历screen对象的所有属性for(var propname in window.screen){str += propname + ": " + window.screen[propname] + "\n"}alert(str);</script>2.4 弹出窗口
<script type="text/javascript">// 获取当前屏幕的大小var width = window.screen.width;var height = window.screen.height;// 打开一个新的满屏窗口window.open("status.html", "_blank", "left=0, top=0, width=" + width + ", height=" + height + ", toolbar = no, menubar = no, resize = no");// 关掉自身window.close();</script>2.5 确认对话框和输入对话框
<a href="http://www.crazyit.org" onClick= "return confirm('请确认是否导航到疯狂Java联盟');">疯狂Java联盟</a>你的名字是：<span id="name"></span><script type="text/javascript">name = prompt("请输入你的名字：" ,"");document.getElementById("name").innerHTML = name;</script>2.6 使用定时器
<body onload="setTime();"><span id="tm"></span><script type="text/javascript">// 定义定时器变量var timer;// 保存页面运行的起始时间var cur = new Date().getTime(); var setTime = function(){// 在tm元素中显示当前时间document.getElementById("tm").innerHTML = new Date().toLocaleString();// 如果当前时间比起始时间大于60秒，停止定时器的调度if (new Date().getTime() - cur > 60 * 1000){// 清除timer定时器clearInterval(timer);}}// 指定每隔1000毫秒执行setTime()函数一次timer = setInterval("setTime();" , 1000);</script></body><body><span id="tm"></span><script type="text/javascript">// 定义定时器变量var timer;// 保存页面运行的起始时间var cur = new Date().getTime(); var setTime = function(){// 在tm元素中显示当前时间document.getElementById("tm").innerHTML= new Date().toLocaleString();// 如果当前时间比起始时间小于等于60秒，执行定时器的调度if (new Date().getTime() - cur <= 60 * 1000){// 指定延迟1000毫秒后执行setTime()函数。window.setTimeout("setTime();" , 1000);}}// 直接调用setTime()函数setTime();</script></body>2.7 navigator和地理位置
不同平台的信息并不完全相同。
<script type="text/javascript">alert(window.navigator);var browser = "当前的浏览器信息是:\n";// 遍历该浏览器的全部属性for(var propname in window.navigator){// 将所有属性名、属性值连缀在一起browser += propname + ": " + window.navigator[propname] + "\n"}alert(browser); </script>2.7.1 geolocation属性
Geolocation对象
- getCurrentPosition（onSuccess，onError，options）
- int watchCurrentPosition（onSuccess，onError，options）
返回监视器的标识id。相当于周期性调用getCurrentPosition方法。
- clearWatch（watchId）：用于停止持续监听地理位置。
2.7.1.1 获取成功的回调函数onSuccess
function （position）｛｝
position包含属性
- timestamp
- coords
- longitude：经度
- latitude：纬度
- altitude：高度
- accuracy：返回经纬度的精确值，以米为单位。
- altitudeAccuracy：返回高度的精确值，以米为单位。
- speed：移动速度或null。
- heading：移动方向，以正北方向顺时针转过的角度来表示。
- timestamp：获取地理位置的时间戳
2.7.1.2 获取失败的回调函数onError
function （error）｛｝
- code：返回错误代码
- 用户拒绝位置服务
- 无法获取地理位置
- 获取地理位置信息超时
- message
2.7.1.3 其他选项options
该参数是一个js对象，支持以下属性
- enableHightAccuracy：指定是否要求高精度的地理位置信息。
- timeout：获取地理位置的超市时间。
- maximumAge：地理信息的缓存时间。
2.7.2 获取地理位置
<script type="text/javascript">var geoHandler = function(position){var geoMsg = "用户的所在的地理位置信息是：<br/>";geoMsg += "timestamp属性为：" + position.timestamp + "<br/>";// 获取Coordinates对象，该对象里包含了详细的地理位置信息var coords = position.coords;// 遍历Coordinates对象的所有属性for(var prop in coords){geoMsg += prop + "-->" + coords[prop] + "<br/>";}// 输出地理位置信息document.writeln(geoMsg);}var errorHandler = function(error){// 为不同错误代码定义错误提示var errMsg = {1: '用户拒绝了位置服务',2: '无法获取地址位置信息',3: '获取地理位置信息超时'};// 弹出错误提示alert(errMsg[error.code]);}// 获取地理位置信息navigator.geolocation.getCurrentPosition(geoHandler, errorHandler, {enableHighAccuracy:true,maximumAge:1000});</script>2.7.3 在google Map上定位
https://developers.google.com/maps/documentation/javascript/basics
<!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title> 在地图上定位 </title><style type="text/css">html { height: 100% }body { height: 100%; margin: 0px; padding: 0px }#map_canvas { height: 100% }</style><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript">function initialize() {navigator.geolocation.getCurrentPosition(function(position){// 获取浏览器提供的地理位置信息var latlng = new google.maps.LatLng(position.coords.latitude , position.coords.longitude);// 设置创建Google地图的选项var myOptions = {zoom: 16,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP};// 获取页面上的map_canvas组件var mapDiv = document.getElementById("map_canvas");// 创建Google地图，指定把地图显示到mapDiv组件上var map = new google.maps.Map(mapDiv , myOptions);// 在地图上创建标记var marker = new google.maps.Marker({position: latlng,animation: google.maps.Animation.BOUNCE,map: map});// 设定标注窗口，并指定该窗口中的注释文字var info = new google.maps.InfoWindow({ content: "我在这里!"});// 打开标注窗口info.open(map, marker);},function(error){alert("您的浏览器没有提供地理位置信息！");},{enableHighAccuracy:true,maximumAge:1000});}</script></head><body onload="initialize()"><div id="map_canvas" style="width:100%; height:100%"></div></body></html>2.8 document对象
Document 对象
Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C 标准.
Document 对象集合
Document 对象属性
属性 描述 IE F O W3C body提供对 <body> 元素的直接访问。
对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie设置或返回与当前文档有关的所有 cookie。419Yesdomain返回当前文档的域名。419YeslastModified返回文档被最后修改的日期和时间。41NoNoreferrer返回载入当前文档的文档的 URL。419Yestitle返回当前文档的标题。419YesURL返回当前文档的 URL。419Yes
Document 对象方法
2.8.1 动态页面
<!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title> 动态页面 </title></head><body><script type="text/javascript">// 计数器var n = 0;var win = null;// 用于显示弹出窗口显示提示信息的函数var show = function(msg){// 判断弹出窗口是否为空if ((win == null) || (win.closed)) {// 打开一个新的弹出窗口win = window.open("","console" ,"width=340,height=220,resizable");// 将弹出窗口的文档打开成一个text/html文档win.document.open("text/html");}// 让弹出窗口得到焦点win.focus();// 在弹出窗口装载的文档中输出信息win.document.writeln(msg); }</script><!-- 激发事件的按钮 --><input type="button" value="单击" onclick="show('您单击了按钮:' + ++n + '次。<br/>');"></body></html>2.8.2 读写cookie
<script type="text/javascript">var setCookie = function(name , value){// 定义变量，保存当前时间var expdate = new Date();// 将expdate的月份 + 1。expdate.setMonth(expdate.getMonth() + 1);// 添加Cookiedocument.cookie = name + "=" + escape(value) ; + "; expires=" + expdate.toGMTString() + ";";}var getCookie = function(name) {// 访问Cookie的name开始处var offset = document.cookie.indexOf(name)// 如果找到指定Cookieif (offset != -1) {// 从Cookie名后位置开始搜索offset += name.length + 1;// 找到Cookie名后第一个分号（;）end = document.cookie.indexOf(";", offset) ;// 如果没有找到分号if (end == -1){end = document.cookie.length;}// 截断字符串中Cookie的值return unescape(document.cookie.substring(offset, end));}else{return "";}}setCookie('user' , 'crazyit.org');alert(getCookie('user'));</script>2.9 HTML5新增的浏览器分析
2.9.1 分析时间性能
<!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title> 分析页面加载时间 </title><script type="text/javascript">// 记录进入页面的时刻var start = new Date().getTime();var load = function(){// 获取页面加载完成时的时刻。var now = new Date().getTime();var page_load_time = now - start;alert("页面加载时间: " + page_load_time);}</script></head><body onload="load();"><img src="http://www.crazyit.org/logo.jpg" alt="疯狂Java联盟"/></body ></html>PerformanceTiming 接口包含了当前页面中与时间相关的信息.
Performance.timing 只读属性会返回这样的一个对象.
属性
Performance 接口不包含任何继承属性.
PerformanceTiming.navigationStartRead only- Is an
unsigned long longrepresenting the moment, in miliseconds since the UNIX epoch, right after the prompt for unload terminated on the previous document in the same browsing context. If there is no previous document, this value will be the same asPerformanceTiming.fetchStart. PerformanceTiming.unloadEventStartRead only- Is an
unsigned long longrepresenting PerformanceTiming.unloadEventEndRead only- Is an
unsigned long longrepresenting PerformanceTiming.redirectStartRead only- Is an
unsigned long longrepresenting PerformanceTiming.redirectEndRead only- Is an
unsigned long longrepresenting PerformanceTiming.fetchStartRead only- Is an
unsigned long longrepresenting PerformanceTiming.domainLookupStartRead only- Is an
unsigned long longrepresenting PerformanceTiming.domainLookupEndRead only- Is an
unsigned long longrepresenting PerformanceTiming.connectStartRead only- Is an
unsigned long longrepresenting PerformanceTiming.connectEndRead only- Is an
unsigned long longrepresenting PerformanceTiming.secureConnectionStartRead only- Is an
unsigned long longrepresenting PerformanceTiming.navigationStartRead only- Is an
unsigned long longrepresenting PerformanceTiming.navigationStartRead only- Is an
unsigned long longrepresenting PerformanceTiming.requestStartRead only- Is an
unsigned long longrepresenting PerformanceTiming.responseStartRead only- Is an
unsigned long longrepresenting PerformanceTiming.responseEndRead only- Is an
unsigned long longrepresenting PerformanceTiming.domLoadingRead only- Is an
unsigned long longrepresenting PerformanceTiming.domInteractiveRead only- Is an
unsigned long longrepresenting PerformanceTiming.domContentLoadedEventStartRead only- Is an
unsigned long longrepresenting PerformanceTiming.domContentLoadedEventEndRead only- Is an
unsigned long longrepresenting PerformanceTiming.domCompleteRead only- Is an
unsigned long longrepresenting PerformanceTiming.loadEvenStartRead only- Is an
unsigned long longrepresenting PerformanceTiming.loadEventEndRead only- Is an
unsigned long longrepresenting
<!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title> 分析页面加载时间 </title><script type="text/javascript">var load = function(){// 记录页面加载完成时的时刻var now = new Date().getTime();var page_load_time = now - performance.timing.navigationStart;alert("页面加载时间: " + page_load_time);}</script></head><body onload="load();"><img src="http://www.crazyit.org/logo.jpg" alt="疯狂Java联盟"/></body ></html>2.9.2 分析导航行为
<script type="text/javascript">switch (performance.navigation.type){case 0:alert("正常导航到该页面！");break;case 1:alert("用户重新加载该页面！");break;case 2:alert("用户“前进”到该页面！");break;default :alert("其他方法进入该页面！");break;}</script> 0 0
- 9.HTML5 JavaScript DHTML
- JavaScript -- DHTML
- javascript && DHTML &&HTC
- [转帖]javascript + DHTMl 画图
- 高级Javascript/DHTML技巧
- DHTML+JAVAScript学习资源
- The DHTML / JavaScript Calendar
- JavaScript & DHTML Cookbook [ILLUSTRATED]
- 高级Javascript/DHTML技巧
- JavaScript & DHTML Cookbook
- javascript+DHTML(2)
- javascript + DHTMl 画图
- DHTML【9】--Javascript
- DHTML【10】--Javascript
- javascript & DHTML cookbook摘抄
- JAVASCRIPT+DHTML实现表格拖动
- DHTML中的常用javascript运用
- JavaScript&DHtml使用心得
- 一个三位自然数正好等于它各数位上的数字和的18倍。这个三位自然数是几？
- 11234 - Expressions
- UVa:11038 How Many O's?
- 使用C语言
- Java note
- 9.HTML5 JavaScript DHTML
- 【ios 汇总 常见错误 crash】 分析
- ural - 1470 - UFOs（树状数组）
- ucos创建任务
- windows核心编程笔记（一）
- 253 - Cube painting UVA
- MySql 查询一周内最近7天记录
- POJ 1330 Nearest Common Ancestors LCA
- Python日志输出——logging模块
