html基础学习02

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.sessionStorage
5.2 永久保存
当数据进行保存后,直到清除浏览器浏览记录或者代码清除:
window.localStorage
5.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获取到上传文件的总大小,使用这两个属性来设置显示上传的进度.