1. h5中的元素拖拽
在html5中,我们可以使用鼠标拖动页面中的某个元素,但是在实现拖拽元素,并且使用拖拽来改变元素布局的话,需要给页面中相应的元素设置一些属性:1.1 实现元素能被拖拽在需要拖拽的元素标签中设置属性:draggable,它只有两个值true和flase,img标签默认支持拖拽.1.2 实现可以拖拽至某个盒子中默认情况是无法将元素拖拽至其他地方,但是如果需要将元素拖拽至某个盒子中的话,需要给该盒子设置事件:DOM.ondragover = function (event) { event.preventDefault();}但是这只是完成了可以拖拽至这个盒子中,还没有完成将元素添加到盒子中.需要给盒子设置当元素放置于盒子中时的事件,在事件处理函数中书写元素添加至盒子中的代码.DOM.ondrop = function(){}2. h5中的全屏显示我们在看视频的时候都会有全屏显示的按钮,当然在其他一些地方也可以将元素全屏显示.而元素的全屏显示功能的基础代码就是:DOM.requesetFullscreen();但是这个方法还未正式启用,所有我们需要对不同浏览器做能力检测:if (DOM.requestFullScreen) { DOM.requestFullScreen();}else if(DOM.webkitRequestFullScreen){ DOM.webkitRequestFullScreen();}else if(DOM.mozRequestFullScreen){ DOM.mozRequestFullScreen();}这里的判断语句是为了检测浏览器中元素是否存在该方法,如果有就调用.3. h5中自定义播放器之前我们讲到过html5中有默认的播放器标签,但是在直接使用默认标签中的属性时并不能达到我们的要求,所有html5给出了许多方法和属性,方便我们对标签进行自定义设置.3.1 play()控制视频的播放,配合pause()使用.3.2 pause()控制视频的暂停,配合play()使用.3.3 currentTime和duration这两个是标签的属性,可以获取视频当前播放的时间和总时间,同样也可以来设置视频需要开始播放的时间.可以使用这两个属性来自定义视频的播放进度,并通过拖拽进度条来改变播放进度.使用这些html5提供的属性和方法,可以使我们页面播放器更加美观.4. h5提供的定位window.navigator.geolocation.getCurrentPosition(function (position) {})调用这个方法的时候需要传入一个回调-函数,在回调函数中通过position.coords.longitude获取当前位置的经度,通过position.coords.latitude获取当前位置的纬度.但是只是通过这个方法获取经纬度,并没有什么作用,我们需要配合网上的一些地图服务器来进行定位,如百度地图,谷歌地图等.这样就可以完成一个个人位置定位的功能.我们可以餐厅百度地图中的设置来制作一个属于自己的定位地图.5. 浏览器端保存数据浏览器浏览页面的时候会将一些信息自动保存在内存中,当页面关闭后清除内存.我们也可以手动将一些我们需要的数据保存至浏览器端.5.1 一次性保存窗口未关闭前,将数据保存下来,窗口关闭后清除数据:window.sessionStorage5.2 永久保存当数据进行保存后,直到清除浏览器浏览记录或者代码清除:window.localStorage5.3 两种方式常用的方法5.3.1 setItem('key','value');设置保存的数据,设置的格式是键值对,并且只能保存字符串.5.3.2 getItem('key');获取对应键的值.5.3.3 通常使用情景我们可以先获取到用户输入的内容,将内容配合设置的键存储在用户的浏览器端,在下次访问时可以直接获取这些数据,无需用户重复输入.5.3.4 拓展虽然通过setItem()只能存储字符串,但是我们可以先将json数据转换为字符串存储在浏览器端,在需要使用时,再通过字符串转换为json对象来获取需要的数据.对应的一组格式转换的方法:JSON.stringify(obj);将json对象转换为字符串,返回的是内容为json对象的字符串.JSON.parse(string);将内容为json对象的字符串,转换为json对象,返回的是一个json对象.6. 获取上传的文件6.1 获取需要上传的文件的信息在获取上传文件之前,需要知道如何获取需要上传的文件的信息.<input type="file" >标签拥有一个属性,可以获取用户选取的文件的信息.dom.files;获取到的是由选取的文件信息组成的数组,可以通过dom.files[index];的方式来选择需要获取文件的信息.然后需要创建文件读取对象,通过这个对象的方法来获取文件的信息.var obj = new FileReader();//创建一个文件读取对象.obj.readAsDataURL(file);//通过该对象调用读取文件的方法,传入一个通过dom.files[index];获取到的文件信息作为参数.obj.onload = function (argument) {//文字加载完毕后调用}file.type:获取文件的类型;obj.result:获取文件的路径信息.6.2 通过form表单获取上传的文件6.2.1 form标签中需要设置的内容在上传文件时表单元素必须是通过post的请求方式,服务器才能获取到上传的文件.并且在form标签中需要设置enctype='multipart/form-data'属性及属性值,为了让表单知道表单中有文件需要上传.6.2.2 php文件中需要设置的内容在点击提交按钮后,上传的文件会在php中保存在一个全局变量中,我们可以通过对应方式来获取到上传文件信息,如:$_GET,$_POST.$_FILES['key'];获取到的是由上传文件信息组成的一个关系型数组,key为上传文件标签的name属性值.move_uploaded_file()将指定的上传文件移动到某个具体的位置,进行存储.这个方法有两个参数:参数1 移动的目标文件参数2 希望保存的位置/希望保存的文件名6.3 通过ajax获取上传的文件6.3.1 ajax可以直接读取form表单中数据在form表单没有执行提交的情况下,在通过ajax请求时,php中可以直接获取到form表单中的数据.但是需要在ajax.send()之前创建一个表单数据对象:new FormData(formDom),括号中传入一个表单元素.然后直接在php中使用$_POST或者$_GET获取数据.6.3.2 将选择的文件进行上传1 html部分在<input type="file" >中选择的文件,通过.append()的方法上传至php,.append()有两个参数:第一个参数:自定义key名;第二个参数:通过dom.files[index];获取选择的文件.2 php部分php设置的与通过form表单获取的过程一致.3 .append()方法还可以通过这个方法来给form表单设置自定义属性及属性值,并且在php中同正常属性一样来获取到设置的属性值.6.3.3 上传文件的同时显示上传进度ajax.upload.onprogress = function (event) {}文件上传的同时出发事件,可以通过event.loaded获取到已上传文件的大小.以及event.total获取到上传文件的总大小,使用这两个属性来设置显示上传的进度.