html5第二天笔记（下）

vedio

播放时间

var duration = element.duration;//视频播放时间
时间转换：var h=Math.floor(duration/3600);
var m = Math.floor(duration/60);
var s = Math.floor(duration%60);

监听播放进度

element.ontimeupdate = function(){    //currentTime获得当前烦人播放进度    this.currentTime;   };

进度条设置

//放到ontimeupdate里面//获取百分比var percent = vedio.currentTime/vedio.duration;percent = percent*100 + "%";//设置可视化进度条，line是进度条$("#line").css("width",percent);

点击跳播

//bar进度条$(".bar").onclick = function(ev){    //获取点击位置    var offset = ev.offsetX;    //获取百分比    var percent = offset/$(this).width();    //当前时间    var currentTime = $("vedio").duration*percent;    //设置时间    $("vedio").currentTime = currentTime;};

全屏播放

$(".expand").on("click",function(){    //webkitRequestFullScreen任意元素全屏    $("vedio").webkitRequestFullScreen;});

播放完成

$("vedio").onended = function(){    //将播放进度设置为零    vedio.currentTime = 0;};

地理定位

获取地理信息

可以通过IP、WiFi、Gps、手机信号

隐私

友好提示，可以进行选择

API详解

function success(position){    console.log(position);  }function error(err){    console.log(err);   }navigator.geolacation.getCurrentPosition(success,error,{    //获取高精度位置    enableHighAccuracy: true；    //超时    timeout: 3000;    //每隔一秒再获取    maximumAge:1000;});

百度地图

• 引入百度地图 js文件

<div id="containter"></div>//把百度地图放到盒子里var map = new BMap.Map("containter"); //...然后根据API写功能

history

ajax获取数据，地址改变，页面没有刷新，dom动态添加数据

<div><button></button></div>var btn = document.getElementById("btn");btn.onclick = function(){    //地址变了但是页面不会刷新，    //param1:对象，在添加历史时,会设置一些数据    //param2:一般不生效    //param3:我们要更改的地址，并且会当一条新记录    history.pushState({},"我是标题","/test.html");    //param1:对象，在替换历史时,会设置一些数据    //param2:一般不生效    //param3:我们要替换的地址，并且会当一条新记录    history.replaceState({},"我是标题"，"test.html");    //历史发生改变后，在操作前进后退时会触发这一个事件    window.onpopstate = function(){        console.log(state);        $.ajax({            });    };}

Web存储 客户端存储

cookie 4k左右

alert(document.cookie);纯粹的字符串，键值对的形式存在

sessionStorage 容量更大

$(".set").on("click",function(){    window.sessionStorage.setItem("name","zhangsan");});//在Resource里面可以查看sessionStorage//也可以读取$(".get").on("click",function(){    window.sessionStorage.getItem("name");});//删除$(".remove").on("click",function(){    window.sessionStorage.removeItem("name");});//清空$(".clear").on("click",function(){    window.sessionStorage.clear();});

sessionStorage在窗口关闭以后，数据会被清空

localStorage

把原来的session改成local 方法和session的一样
区别在于：
1. localStorage可以存20M
2. localStorage存储的数据永久有效，除非ctrl+shift+delet清缓存

appcache

• 可配置需要缓存的数据
• 网络无连接仍可用
• 本地读取缓存数据
• 减少请求，缓解服务器负担
  h5可以调用硬件

缓存文件

顶行写：

 CACHE MANIFEST CACHE: ./images/img1.png NETWORK: ./css/main.css

//在html header里面添加缓存文件路径manifest="./study.appcache"