HTML5的使用及基本注意说明相关笔记（二）

1.使用HTML5来DIY彩虹播放器

◆html5新增的语义化标签，多媒体盒子标签 figure，专门用来放视频标签、音频标签、图片标签等，

视频

◆

document.querySelector("button:nth-child(3)")

，是可以获取到元素的，html5新增的获取dom对象的api是支持css3新的选择器的。

◆这是css字图图标的一个库http://fontawesome.dashgame.com/，使用的时候只需要引用相应的文件，然后只有引用类即可，实现的原理是，内部给这个类添加了一个伪元素，所以只要添加这个类，就会产生一个伪元素，伪元素的content属性，赋值了字体图标的值，所以就会显示出一个图标来，注意看清楚css文件中是怎么写的，因为不同版本的css文件中代码有不同的地方，如3.2版本的都会自动给你设置字体，而4.7版本的需要你自己设置字体，或者多添加一个字体的类

★谷歌浏览器在设置video标签的currentTime属性时无效，并且会把currentTime属性赋值为0，但是火狐可以，所以自己制作视频控制条时还是会存在兼容性的问题

视频对象.play() //表示播放
视频对象.pause() //表示暂停
视频对象.οncanplay=function(){}//表示视频加载完毕可以播放的时候
视频对象.duration //表示获取视频的总时间长度，单位为秒
视频对象.οntimeupdate=function(){}//表示视频播放时，当前的播放时间变化的时候
视频对象.currentTime //表示获取视频当前已经播放的时间，其实也可以设置，但是谷歌浏览器中无法设置，设置后会被清零。
视频对象.webkitRequestFullScreen() //表示视频全屏

★彩虹播放器：这个播放器有一点点好看。

    
    
    
    
    



    
自定义视频播放器
    

        
        
        

            
            
            
            

                

            
            
            

                00:00:00/
                00:00:00
            
            
            
        
    

2.在HTML5中，任何元素都可以拖拽，但是默认可以拖拽的元素有图片和超链接，其它元素如果想实现拖拽，可以通过给元素设置

draggable="true"

，这样就开启了元素拖拽的功能

◆拖拽元素的事件监听

◇

ondrag 

应用于拖拽元素，整个拖拽过程都会一直在调用

◇

ondragstart 

应用于拖拽元素，当拖拽开始时调用

◇

ondragleave 

应用于拖拽元素,当鼠标离开了原来那个不会动元素的范围内时调用，但是鼠标还是按住了拖拽的那个元素，只不过是离开了那个元素原本位置的范围。

◇

ondragend 

应用于拖拽元素，当拖拽结束时调用

◆拖拽到某个目标元素的监听事件

◇

ondragenter 

应用于目标元素，当拖拽元素进入时调用（也是针对鼠标，当鼠标按住拖拽的元素时，鼠标移入到目标元素的范围内，才会触发这个事件）

◇

ondragleave 

应用于目标元素，当鼠标离开目标元素时调用（也是针对鼠标，当鼠标按住拖拽的元素时，鼠标移入到目标元素的范围内后，再移出目标元素范围内，才会触发这个事件）

◇

ondragover 

 应用于目标元素，当停留在目标元素上时调用（也是针对鼠标，当鼠标按住拖拽的元素时，鼠标移入到目标元素的范围内，只要在目标元素的范围内，就会连续触发这个事件），这个事件默认行为是不接受拖拽元素的，如果想让目标元素接受拖拽元素的话，需要在事件方法中的事件驱动里加一句

event.preventDefault

取消事件的默认行为，只有这样

ondrop

事件才会触发，当前目标元素接受拖拽元素。

◇

ondrop 

应用于目标元素，当在目标元素上松开鼠标时调用

★使用html5的拖拽来DIY效果：拖拽彩虹球

    
    
    



    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8

3.取消事件的默认行为 ，在js中可以使用

event.preventDefault()

和函数末尾的

return false

，这两种都可以取消事件的行为，但是都有兼容性的问题

//取消事件的默认行为
if (event.preventDefault) {
                event.preventDefault();
            } else {
                return false;
            }

，在jquery中使用 

event.preventDafault()

可以取消事件的默认行为，兼容性很好。

4..HTML5中全屏显示API：允许页面上的任一元素全屏显示
◆元素.requetFullscreen() 开启全屏显示
◆元素.cancleFullscreen() 关闭全屏显示

◆但是兼容性问题值得注意，不同的浏览器需要添加前缀：

webkitRequestFullScrenn();//谷歌

mozRequestFullScrenn();//火狐

webkitCancleFullScreen() ;//谷歌

mozCancleFullScreen();//火狐

◆html5全屏的兼容性写法

 //兼容性写法
                if (box.requestFullscreen) {
                    box.requestFullscreen();
                } else if (box.webkitRequestFullScreen) {
                    box.webkitRequestFullScreen();
                } else if (box.mozRequestFullScreen) {
                    box.mozRequestFullScreen();
                } else {
                    alert("您的浏览器暂时不支持html5全屏效果");
                }

◆

5.HTML5中的Web存储

◆在html4中使用

document.cookie

来存储本地的数据 ，可以用来存储大小约4kb的数据，解析起来很不方便，cookie一般用于存储用户名和密码。

◆html5中的Storage 存储

◇sessionStorage：会话存储，存到浏览器缓存中

window.sessionStorage

设置与读取方便，容量为5M，只能够存乎此字符串，可以使用

JSON.stringfy()

将对象编码后存储，生命周期为关闭浏览器窗口，在同一个窗口下数据可以共享。

    
    



添加
获取
更新
删除
清空
key(n)

◇localStorage：本地存储，存到本地磁盘中

window.localStorage

设置与读取方便，容量为20M，只能够存取字符串，可以使用

JSON.stringfy()

将对象编码后存储，永久生效，除非手动删除，可以多窗口共享

    
    



添加
获取
更新
删除
清空
key(n)

◇Storage使用的方法

	setItem(key,value) //设置存储内容，
	getItem(key)// 读取存储内容，
	removeItem(key) //删除键值为key的存储内容，
	clear() //清空所有存储内容，
	key(n) //以索引值来获取存储内容的键

        ◇使用Storage记住密码

    
    
    



    用户名：





    密 码：





    记住密码




登录

★WebSQL、IndexDB已经被w3c 放弃了..，因为生命周期差异，存储空间差异。

6.HTML5中的检测网络状态

◆在线

window.ononline

 用户网络连接时被调用  ,但是很多浏览器早已不支持这种写法了，所以只能够使用这种方式 

window.addEventListener("online", function () {});

◆离线

window.onoffline 

用户网络断开时被调用，但是很多浏览器早已不支持这种写法了，所以只能够使用这种方式 

window.addEventListener("offline", function ()  {});

◆无论是online还是offline，都是惰性的事件，只有突然间来网或者突然间断网才会有效果，否则无效。

◆navigator.onLine

window.navigator.onLine

 用户网络只要是连接的，返回值就为true。

◆

7.HTML5的应用缓存，在html5可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件即可
◆可配置需要缓存的资源
◆网络无连接应用也可以用
◆本地读取缓存资源，提高访问速度，增强用户体验
◆减少请求，缓解服务器负担

◆创建一个文件，文件后缀名为 .appcache，文件中书写的格式

CACHE MANIFEST


# 注释以#开头
#下面是要缓存的文件
CACHE:
	http://baidu.com/Upload/Image/01.jpg
	http://baidu.com/Upload/Image/02.jpg


#指定必须联网才能访问的文件
NETWORK:
	http://baidu.com/Upload/Image/03.jpg
	http://baidu.com/Upload/Image/04.jpg


#当当前页面无法访问时回退的页面
FALLBACK:
	http://baidu.com/404.html

,让html文件与这个缓存文件关联起来

，只需要在html标签中加入一个属性然后属性值为这个文件的名字即可。
◆应用程序缓存可以缓存css、js、image、html等。

◆这个文件里的内容是写死的，但是可以使用一些文件流程序来动态生成这个文件。

◆

8.HTML5中的地理定位，在html5中使用地理信息的API来获取用户的地理信息，这样就可以基于用户位置开发互联网应用，既基于位置服务（Location Base Service）
◆获取地理信息的方式【
◇IP地址
◇三维坐标：GRS（Global Positioning System 全球定位系统）、Wi-Fi、 手机信号
◇用户自定义数据
】
◆获取地理信息的方式比【
◇IP地址：优点：任何地方都可以使用，在服务器端处理。缺点：不精确（经常出错，一般精确到城市级），运算代价大。
◇GRS：优点：很精确。缺点：定位时间长，耗电量大，室内效果差，需要额外硬件设备支持。
◇Wi-Fi：优点：精确，在室内使用简单、快捷。缺点：在乡村这些Wi-Fi接入点少的地区无法使用。
◇手机信号：优点：相当精确可在室内使用简单、快捷。缺点：需要能够访问手机或其modem设备。
◇用户自定义数据：优点：可获得比程序定位服务更准确的位置数据，用户自行输入可能比自动检测更快。缺点：可能不准确，特别是当用户位置变更后。
】
◆在html5地理定位API进行定位时，必须要得到用户的明确许可，这是html5中地理定位的协议里提供的保护用户隐私的机制。
★注意，pc端需要电脑设置了允许浏览器有定位的权限才能够定位成功，否则就会定位失败。
★

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)

 获取当前地理信息，

navigator.geolocation.watchPosition(successCallback, errorCallback, options)

 重复获取当前地理信息。

当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。Coords(坐标)

position.coords.latitude//纬度
position.coords.longitude//经度

，当获取地理信息失败后，会调用errorCallback，并返回错误信息error
，可选参数 options 对象可以调整位置信息数据收集方式。

◆

navigator.geolocation

 表示通过bom对象中的navigator对象来获取地理定位的对象

◆使用方式

navigator.geolocation.getCurrentPosition(function(position){
console.log("定位成功")；
console.log("经度:"+position.coords.longitude+"纬度"+position.coords.latitude);
},function(error){
console.log("定位失败")；
console.log(error)；
});

◆获取到了经纬度之后，就可以通过一些地图API（百度地图、谷歌地图、高德地图）来具体进行定位

◆获取经纬度

◆获取经纬度后使用百度地图API

◆一个查询全球定位信息的网站：http://www.gpsspg.com/（全球定位信息查询：经纬度、手机号、基站、身份证号、行政区）