html基础学习02

Posted 2020-08-08 5毛钱小辣条

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获取到上传文件的总大小,使用这两个属性来设置显示上传的进度.