H5C302
H5C302
1、网络监听端口
ononline及onoffline事件
2、全屏接口
注意：在使用时不同浏览器需要添加不同的前缀：
chrome:webkit
firefox:moz
ie:ms
opera:o
如：div.webkitRequestFullSreen();
需要写兼容性代码：
特别注意函数名的拼写。
3、FileReader对象的使用
form的onchange属性可以设置值为某一回调函数
仔细阅读以下代码，掌握其使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 20px;
width: 0%;
background-color:red;
}
</style>
</head>
<body>
<!--展示图片：-->
<!--src:指定路径(资源定位--url):src请求的是外部文件，一般来说是服务器资源。意味着它需要向服务器发送请求，它占用服务器资源-->
<!--<img src="../images/l1.jpg" alt="">-->
<!--需求：即时预览：
即时：当用户选择完图片之后就立刻进行预览的处理 >>onchange
预览：通过文件读取对象的readAsDataURL()完成-->
<form action="">
文件： <input type="file" name="myFile" id="myFile" onchange="getFileContent();"> <br>
<div></div>
<input type="submit">
</form>
<img src="" alt="">
<script>
var div=document.querySelector("div");
/*FileReader:读取文件内容
* 1.readAsText():读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8
* 2.readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储
* 3.readAsDataURL():读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL.DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率。
* abort():中断读取*/
function getFileContent(){
/*1.创建文件读取对象*/
var reader=new FileReader();
/*2.读取文件，获取DataURL
* 2.1.说明没有任何的返回值:void：但是读取完文件之后，它会将读取的结果存储在文件读取对象的result中
* 2.2.需要传递一个参数 binary large object:文件(图片或者其它可以嵌入到文档的类型)
* 2.3:文件存储在file表单元素的files属性中，它是一个数组*/
var file=document.querySelector("#myFile").files;
reader.readAsDataURL(file[0]);
/*获取数据*/
/*FileReader提供一个完整的事件模型，用来捕获读取文件时的状态
* onabort:读取文件中断片时触发
* onerror:读取错误时触发
* onload:文件读取成功完成时触发
* onloadend:读取完成时触发，无论成功还是失败
* onloadstart:开始读取时触发
* onprogress:读取文件过程中持续触发*/
reader.onload=function(){
//console.log(reader.result);
/*展示*/
document.querySelector("img").src=reader.result;
}
reader.onprogress=function(e){
var percent= e.loaded/ e.total*100+"%";
div.style.width=percent;
}
}
</script>
</body>
</html>
3、拖拽接口
在h5中，如果想拖拽元素，就必须为元素添加draggable=“true”.图片和 超链接默认可以拖曳
学习下列拖拽的事件
浏览器默认阻止ondrop事件，必须在ondragover中阻止浏览器的默认行为
为页内所有元素实施拖拽
借助e：事件源对象
e当中的target属性值会告诉我们当前哪一个元素被拖拽
目标元素同理
实现拖拽要在ondrag事件内利用appendChild方法追加
可通过事件源对象的dataTransfer来实现数据的存储与获取
e.dataTransfer.setData(format,data);
format:数据类型，text/html text/url-list
data：数据,一般是字符串值
通过e.dataTransfer.setData存储的数据只能在ondrop事件内获取
4、地理定位接口：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.de{
width: 300px;
height: 300px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="demo" class="de"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
/*能力测试*/
if (navigator.geolocation)
{
/*1.获取地理信息成功之后的回调
* 2.获取地理信息失败之后的回调
* 3.调整获取当前地进信息的方式*/
//navigator.geolocation.getCurrentPosition(success,error,option);
/*option:可以设置获取数据的方式
* enableHighAccuracy:true/false:是否使用高精度
* timeout:设置超时时间，单位ms
* maximumAge:可以设置浏览器重新获取地理信息的时间间隔，单位是ms*/
navigator.geolocation.getCurrentPosition(showPosition,showError,{
/*enableHighAccuracy:true,
timeout:3000*/
});
}
else{
x.innerHTML="Geolocation is not supported by this browser.";
}
}
/*成功获取定位之后的回调*/
/*如果获取地理信息成功，会将获取到的地理信息传递给成功之后的回调*/
// position.coords.latitude 纬度
// position.coords.longitude 经度
// position.coords.accuracy 精度
// position.coords.altitude 海拔高度
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
/*获取定位失败之后的回调*/
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
getLocation();
</script>
</body>
</html>
由于忠 帼的 ？郑侧，我们无法在浏览器端获取用户的地理位置信息。所以我们只能通过第三方接口
利用百度地图提供的api即可
5、Web存储
1）sessionStorage
设置完毕后可在application内查看
所存储的数据本质是存储在当前的页面中在，在其他页面及浏览器中均无法找到相应数据。
生命周期为关闭当前页面
数据的key找不到，返回key
2）localStorage存储
同样在application 内可以查看
如果要清楚必须在浏览器相应页面或写代码
进行删除
3）应用程序缓存接口
利用Chrome中Network面板中的箭头可以模拟网络断开连接的情形
<html lang="en" mainfest="应用程序缓存清单文件的路径，建议文件的扩展名是.appcache">
本质上是一个文本文件
下面介绍如何写.appcache的文件
示例如下：
6、自定义播放器
1）所需方法
都是原生的js方法，如果使用jq的话，必须把jq对象转为dom元素才能调用
其余事件及方法请参阅w3c官网。
d2代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/font-awesome.css">
<link rel="stylesheet" href="../css/css.css">
</head>
<body>
<h3 class="playerTitle">视频播放器</h3>
<div class="player">
<video src="../mp4/chrome.mp4"></video>
<div class="controls">
<a href="javascript:;" class="switch fa fa-play"></a>
<a href="javascript:;" class="expand fa fa-expand"></a>
<div class="progress">
<div class="bar"></div>
<div class="loaded"></div>
<div class="elapse"></div>
</div>
<div class="time">
<span class="currentTime">00:00:00</span>
\
<span class="totalTime">00:00:00</span>
</div>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script>
/*通过jq来实现功能*/
$(function(){
/*1.获取播放器*/
var video=$("video")[0];
/*2.实现播放与暂停*/
$(".switch").click(function(){
/*实现播放与暂停的切换：如果是暂停>>播放 ，如果是播放 >> 暂停*/
if(video.paused){
video.play();
/*移除暂停样式，添加播放样式*/
}
else{
video.pause();
/*移除播放样式，添加暂停样式*/
}
/*设置标签的样式 fa-pause:暂停 fa-play：播放*/
$(this).toggleClass("fa-play fa-pause");
});
/*3.实现全屏操作*/
$(".expand").click(function(){
/*全屏>>不同浏览器需要添加不同的前缀>>能力测试*/
if(video.requestFullScreen){
video.requestFullScreen();
}
else if(video.webkitRequestFullScreen){
video.webkitRequestFullScreen();
}
else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}
else if(video.msRequestFullScreen){
video.msRequestFullScreen();
}
});
/*4.实现播放业务逻辑：当视频文件可以播放时触发下面的事件*/
video.oncanplay=function(){
setTimeout(function(){
/*1.将视频文件设置为显示*/
video.style.display="block";
/*2.获取当前视频文件的总时长(以秒做为单位，同时获取了小数值)，计算出时分秒*/
var total=video.duration; //01:01:40 00:00:36
/*3.计算时分少 60*60=3600
* 3700:3700/3600
* 3700:3700%3600 >> 100 /60*/
/*var hour=Math.floor(total/3600);
/!*补0操作*!/
hour=hour<10?"0"+hour:hour;
var minute=Math.floor(total%3600/60);
minute=minute<10?"0"+minute:minute;
var second=Math.floor(total%60);
second=second<10?"0"+second:second;*/
var result=getResult(total)
/*4.将计算结果展示在指定的dom元素中*/
$(".totalTime").html(result);
},2000);
}
/*通过总时长计算出时分秒*/
function getResult(time){
var hour=Math.floor(time/3600);
/*补0操作*/
hour=hour<10?"0"+hour:hour;
var minute=Math.floor(time%3600/60);
minute=minute<10?"0"+minute:minute;
var second=Math.floor(time%60);
second=second<10?"0"+second:second;
/*返回结果*/
return hour+":"+minute+":"+second;
}
/*5.实现播放过程中的业务逻辑，当视频播放时会触发ontimeupdate事件
* 如果修改currentTime值也会触发这个事件，说白了，只要currenTime值变化，就会触发这个事件*/
video.ontimeupdate=function(){
/*1.获取当前的播放时间*/
var current=video.currentTime;
/*2.计算出时分秒*/
var result=getResult(current);
/*3.将结果展示在指定的dom元素中*/
$(".currentTime").html(result);
/*4.设置当前播放进度条样式 0.12>>0.12*100=12+%>12%*/
var percent=current/video.duration*100+"%";
$(".elapse").css("width",percent);
}
/*6.实现视频的跳播*/
$(".bar").click(function(e){
/*1.获取当前鼠标相对于父元素的left值--偏移值*/
var offset= e.offsetX;
/*2.计算偏移值相对总父元素总宽度的比例*/
var percent=offset/$(this).width();
/*3.计算这个位置对应的视频进度值*/
var current=percent*video.duration;
/*4.设置当前视频的currentTime*/
video.currentTime=current;
});
/*7.播放完毕之后，重置播放器的状态*/
video.onended=function(){
video.currentTime=0;
$(".switch").removeClass("fa-pause").addClass("fa-play");
}
});
</script>
</body>
</html>
webstorm对视频支持较差
要直接在浏览器打开
H5C302的更多相关文章
随机推荐
- canvas 画线
一.canvas是基于状态的绘图环境 1.canvas是基于状态的绘制 context.moveTo(100,100); context.lineTo(700,700); context.lineWi ...
- kickstart-F
A题 Anagrams字符串是指两个字符串中都出现相同的字母且这些字母出现的次数相同. 小数据完全可以暴力,遍历A的子串,遍历B的子串,通过bool f(i,j,k,l)计算A[i,j], B[k,l ...
- Evaluation map and reflexive space
For a normed space \(X\), an isometric isomorphism can be defined from \(X\) to its second dual spac ...
- Spring boot国际化
国际化主要是引入了MessageSource,我们简单看下如何使用,以及其原理. 1.1 设置资源文件 在 properties新建i18n目录 新建message文件: messages.prope ...
- eclipse启动web应用 报错
错误:The origin server did not find a current representation for the target resource or is not willing ...
- 获取本地的ip，地址，code
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Hive| ETL清洗& 查询练习
ETL清洗数据 导Jar包 <dependencies> <dependency> <groupId>log4j</groupId> <artif ...
- 反射-Emit
一.Emit Emit,可以称为发出或者产出.在Framework中,与Emit相关的类基本都存在与System.Reflection,Emit命名空间下.可见Emit是作为反射的一个元素存在,反射可 ...
- SSH框架学习------struts2前后台传值（二）
struts2的Action类一般都会继承(extends)ActionSupport类(Action类,即实现action的类)1.前传后:jsp里<input type="text ...
- Pushing Boxes POJ - 1475 （嵌套bfs）
Imagine you are standing inside a two-dimensional maze composed of square cells which may or may not ...