1.HTML5地理位置定位功能
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function success(position){
console.log('经度:',position.coords.longitude);
console.log('纬度:',position.coords.latitude);
// 如果想要根据经纬度在地图上显示,参考http://lbsyun.baidu.com/index.php?title=jspopular3.0
},
function error(error){
console.log('错误代码:',error.code);
console.log('错误信息:',error.message);
},
{
enableHighAccuracy: true, // 是否允许使用高精度
maximumAge : 30000, // 是指缓存的时间
timeout : 27000 // 指定的超时时间
}
);
} else {
alert('你的浏览器不支持此功能');
}
2.HTML5桌面提醒功能
/*
'default':推送功能默认关闭
'granted':推送功能为开启状态(用户点击允许后的状态)
'denied':为用户点击了禁用(拒绝打开推送功能)
*/
if(window.Notification.permission == 'default'){
// 如果用户没有开启,让用户去开启
window.Notification.requestPermission((status)=>{
console.log('status:',status); // 获取用户选择之后是开启还是关闭的状态
if (status == 'granted') { // 如果用户同意就推送信息
let option={
body:'王清是世界上最帅的男人', // 推送信息的内容
icon:'./1.jpg' // 推送信息时展现的图标
}
let notify = new Notification('王清帅不帅?',option);
// 推送展现的时候触发的方法
notify.onshow = ()=>{
console.log('提示框展示了');
}
// 点击消息框触发的事件
notify.onclick = ()=>{
console.log('点击消息框了');
setTimeout(() => {
notify.close(); // 关闭消息框
}, 200);
}
// 消息弹框关闭的时候触发的事件
notify.onclose=()=>{
console.log('消息弹框关闭了');
}
// 出错的时候触发的事件
notify.onerror=()=>{
console.log('报错啦');
}
}
});
}
3.HTML5本地存储之数据库
/* Web SQL最核心的三个方法
1.openDatabase: 这个方法使用现有的数据库或创建新数据库创建数据库对象
2.transaction: 这个方法允许我们根据情况控制事务提交或回滚
3.executeSql:这个方法用于执行真实的SQL语句
*/
if (window.openDatabase) {
/*
参数:数据库名称,版本号,描述文本,数据库大小,创建数据库之后的回调
*/
let dataBase = openDatabase('student','1.0','my first webSQL',2*1024*1024,(result)=>{
console.log('创建数据库后的结果:',result);
});
console.log('dataBase',dataBase);
dataBase.transaction((fx)=>{
// 创建stu表
fx.executeSql(
'create table if not exists stu (id UNIQUE,name TEXT)',
[],
()=>{
console.log('stu表创建成功');
},
()=>{
console.log('stu表创建失败');
}
),
// 插入数据
fx.executeSql('insert into stu (id,name) values (01,"王清")');
fx.executeSql('insert into stu (id,name) values (02,"王思聪")');
fx.executeSql('insert into stu (id,name) values (04,"张博洋")');
fx.executeSql(
'insert into stu (id,name) values (?,?)',
[07,"张三"],
()=>{
console.log('02数据插入成功')
},
()=>{
console.log('02数据插入失败')
}
);
// 更新数据
fx.executeSql('update stu set name="张宇" where id=07');
// 查询数据
fx.executeSql(
'select * from stu',
[],
(fx,result)=>{
console.log('查询结果:',result.rows);
for (let i=0;i<result.rows.length;i++) {
console.log(result.rows.item(i));
}
}
);
// 删除数据
fx.executeSql('delete from stu where id=01');
// 删除表
fx.executeSql('drop table stu');
})
}
4.HTML5离线存储
(1)配置服务器(这里以Apache为例)
AddType text/cache-manifest .manifest
(2)在根目录下新建文件 cache.manifest,该文件叫缓存清单,内容如下:
#这一句必须存在,而且必须放在开头
CACHE MANIFEST
#离线的时候可以访问的文件
CACHE:
1.html
1.js
1.css
#有网的时候才可以访问的文件
1.jpg
#如果访问不到1.html可以加载2.html
FALLBACK:
1.html 2.html
(3)在html文件中添加内容
<html manifest='cache.maifest'></html>
注:
a.从没有网的环境到有网的环境,需要修改一下cache.manifest文件,随便修改什么都行,哪怕打一个空格键,让它重新加载新内容
b.判断当前环境是有网还是没有网,使用navigator.onLine来进行判断