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"