HTML5进阶
内容：
1.geolocation元素
2.video元素和audio元素
3.localStorage
4.WebWorker
5.WebSQL、IndexedDB
6.文件操作、文件拖拽新概念
7.canvas元素和SVG/VML
1.geolocation元素
(1)原理
- PC端：使用IP地址定位 精度非常差
- 移动：使用GPS定位 精度很高
(2)使用
<!-- author: wyb -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>geolocation</title>
<script>
// geolocation对象的方法:
// getCurrentPosition 获取位置(1次)
// watchPosition 不断获取位置
// clearWatch 关闭
window.onload = function () {
var oBtn = document.querySelector('#btn1')
oBtn.onclick = function () {
// console.log(navigator.geolocation)
// navigator.geolocation.getCurrentPosition(成功, 失败, 参数)
navigator.geolocation.getCurrentPosition(function (res) {
alert("成功")
// coords -> 坐标
console.log(res.coords); //创建和初始化地图函数：
function initMap() {
createMap(); // 创建地图
setMapEvent(); // 设置地图事件
addMapControl(); // 向地图添加控件
addMapOverlay(); // 向地图添加覆盖物
} function createMap() {
map = new BMap.Map("bmap");
// res.coords.longitude, res.coords.latitude -》 获取坐标中的经度和纬度
map.centerAndZoom(new BMap.Point(res.coords.longitude, res.coords.latitude), 15);
} function setMapEvent() {
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom()
} function addClickHandler(target, window) {
target.addEventListener("click", function () {
target.openInfoWindow(window);
});
} function addMapOverlay() {
var markers = [
{
content: "来找我啊",
title: "我的位置",
imageOffset: {width: 0, height: 3},
position: {lat: res.coords.latitude, lng: res.coords.longitude}
}
];
for (var index = 0; index < markers.length; index++) {
var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
var marker = new BMap.Marker(point, {
icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
})
});
var label = new BMap.Label(markers[index].title, {offset: new BMap.Size(25, 5)});
var opts = {
width: 200,
title: markers[index].title,
enableMessage: false
};
var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
marker.setLabel(label);
addClickHandler(marker, infoWindow);
map.addOverlay(marker);
}
;
} //向地图添加控件
function addMapControl() {
var scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
map.addControl(scaleControl);
var navControl = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(navControl);
var overviewControl = new BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: true
});
map.addControl(overviewControl);
} var map;
initMap(); }, function (err) {
alert("失败")
alert(err)
})
}
}
</script>
<!--引用百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<style>
.container{
width: 80%;
margin: 0 auto;
}
.bmap {
width: 100%;
height: 666px;
margin: 0 auto;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body> <div class="container">
<div class="bmap" id="bmap">
<input type="button" value="定位" id="btn1">
</div>
</div> </body>
</html>
最后效果如下：
注意：不能使用谷歌浏览器(请求的IP库是国外的，没翻墙的话查不到IP对应的地址!)，使用微软的IE or Edge浏览器均可实现，另外要允许使用定位
2.video元素和audio元素
关于video元素和audio元素：https://www.cnblogs.com/wyb666/p/9751083.html
3.localStorage
(1)什么是localStorage
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同
(2)优点与缺点
localStorage的优势：
- localStorage拓展了cookie的4K限制
- localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限：
- 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
- 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
- localStorage在浏览器的隐私模式下面是不可读取的
- localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
- localStorage不能被爬虫抓取到
(3)与其他存储方法的区别
- localStorage 永久存储(本地存储)、大(5M)、浏览器独享
- sessionStorage 会话期间存储(浏览器一关就没)、大(5M)
- cookie： 小(4K)、浏览器和服务器共享
(4)localStorage使用
<!-- author: wyb -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>localStorage</title>
<script>
// 存取元素
// localStorage.a=12;
// alert(localStorage.a);
// console.log(localStorage);
// localStorage.b=5; //遍历 -> 遍历所有元素 -> 属性和方法
// for(let name in localStorage){
// alert(`${name}: ${localStorage[name]}`);
// } // 遍历 -> 只遍历属性值
for(let i=0;i<localStorage.length;i++){
let key=localStorage.key(i); alert(`${key}: ${localStorage[key]}`);
} // 删除
delete localStorage.a
</script>
</head>
<body>
</body>
</html>
简单应用-保存草稿：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>localStorage应用-存草稿</title>
<script>
window.onload=function (){
let oTxt=document.getElementById('txt1');
let oBtn=document.getElementById('btn1'); oTxt.value=localStorage.tmp_txt||''; oTxt.oninput = function (){
localStorage.tmp_txt=oTxt.value;
}; oBtn.onclick = function (){
alert('发送完成');
oTxt.value = ''
delete localStorage.tmp_txt;
};
};
</script>
</head>
<body> <textarea rows="28" cols="80" id="txt1"></textarea>
<input type="button" name="" value="发送" id="btn1"> </body>
</html>
4.WebWorker
web多进程，几乎没怎么用
在前端中的进程：
- 主进程——UI进程
- 子进程——工作进程
WebWorker：
- 不能控制UI的东西；可以进行数据交互
- 子进程不能再创建子进程
- 跨域
关于多进程——能更充分发挥计算机资源（内存×、IO×、网络×、CPU√）
基本在web中没用，因为web中不太占用CPU，主要消耗是在内存及IO及网络带宽上
webworker实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webworker</title>
<script>
// 这是主进程
let oW=new Worker('1.js'); oW.onmessage = function (ev) {
alert(ev.data)
} oW.postMessage({n1: 2, n2: 3})
</script>
</head>
<body></body>
</html>
// 这是子进程
this.onmessage = function (ev) {
let {n1, n2} = ev.data;
let result = n1 + n2;
this.postMessage(result);
};
5.WebSQL、IndexedDB
因为有安全隐患，被W3C删掉了，现在我们无需关心
6.文件操作、文件拖拽新概念
详情见：
https://www.cnblogs.com/wyb666/p/9735022.html
https://www.cnblogs.com/wyb666/p/9740731.html
7.canvas元素和SVG/VML
(1)三者区别
- canvas 位图——放大失真 HTML5标准
- SVG 矢量图——无限缩放 不是HTML5的东西，是一个独立标准
- VML 矢量图 IE的矢量图
(2)canvas具体使用
- 路径操作：相当于选区——没有效果，还需后续操作
- 闭合：一定要用closePath
- 边线：stroke()
- 填充：fill()
- 线宽：lineWidth
- 线色：strokeStyle
- 填充颜色：fillStyle
实例：
<!-- author: wyb -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>canvas画图</title>
<script>
window.onload = function () {
let oC = document.querySelector('#c1'); // 图形上下文——接口：所有绘图方法、属性
let gd = oC.getContext('2d'); // 路径操作——类似PS的选区 -> 选取区域:
// 起点
gd.moveTo(470, 81);
gd.lineTo(778, 236);
gd.lineTo(532, 411);
gd.lineTo(312, 259); // gd.lineTo(470, 81);
gd.closePath(); // 也可以直接使用系统提供的闭合函数来闭合(建议用这个) // 选取了之后要做事:
gd.lineWidth=20; // 设置线的宽度
gd.strokeStyle='red'; // 设置线的颜色
gd.stroke(); // 边线
// gd.fill(); // 填充
}
</script>
<style>
body {
background: black;
text-align: center;
} #c1 {
background: #fff;
}
</style>
</head>
<body>
<canvas id="c1" width="800" height="600"></canvas>
</body>
</html>
效果如下：
HTML5进阶的更多相关文章
- HTML5 进阶系列：indexedDB 数据库
前言 在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据.从上篇:HTML5 进阶系列:web Stora ...
- HTML5进阶(三)HBuilder实现软件自动升级(优化篇)
HBuilder实现软件自动升级(优化篇) 前言 受前篇博客<HTML5进阶(二)HBuilder实现软件自动升级>(点击查看详情)的影响,测试过程中发现APP自动更新还是存在问题,第一次 ...
- HTML5进阶(二)HBuilder实现软件自动升级
HBuilder实现软件自动升级 前言 移动APP开发好后需要实现软件自动升级功能,经过一番搜索,发现HBuilder具有"App资源在线升级更新"的功能,遂研究之. 经过一番测试 ...
- HTML5 进阶系列：拖放 API 实现拖放排序
前言 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能. 想要拖放某个元素,必须设置该元素的 dragga ...
- HTML5 进阶系列：canvas 动态图表
前言 canvas 强大的功能让它成为了 HTML5 中非常重要的部分,至于它是什么,这里就不需要我多作介绍了.而可视化图表,则是 canvas 强大功能的表现之一. 现在已经有了很多成熟的图表插件都 ...
- HTML5 进阶系列：文件上传下载
前言 HTML5 中提供的文件API在前端中有着丰富的应用,上传.下载.读取内容等在日常的交互中很常见.而且在各个浏览器的兼容也比较好,包括移动端,除了 IE 只支持 IE10 以上的版本.想要更好地 ...
- HTML5 进阶系列：拖放 API 实现拖放排序(转载)
HTML5之拖放API实现拖放排序 前言 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能. 想要拖放某个 ...
- html5进阶之canvas图像基础
1.首先还是使用之前讲过的Image()函数来预加载图像. 在调用图像之前,需创建一个事件监听器,为其保证图像已经正确的加载. 如下图: 监听图片已经正确加载 2.把图像显示在画布上面,这里将不再使用 ...
- Web 开发中应用 HTML5 技术的10个实例教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
随机推荐
- ubuntu16.04 下 NVIDIA GTX1050ti 显卡驱动 PPA安装
本文参考资料链接: http://blog.csdn.net/10km/article/details/61191230 前几天在京东商城上花了6999元买了台笔记本(惠普(HP)暗影精灵II代Pro ...
- jQuery prop() 方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- LG1116 【车厢重组】
前言 看了大家的做法,什么冒泡排序,插入排序,树状数组,线段树,都好厉害呐,我都没想出来 但我发现竟然还没有人用主席树,于是我跟大家交流一下 主席树 做法 显然我们有 \(Ans=\sum_{i=1} ...
- 使用blessed 开发丰富的cli 应用
blessed 是一个不错的npm 包,可以帮助我们开发出带有丰富ui界面的cli 应用,类似的有subzero 测试环境准备 项目结构 ├── README.md ├── app.js ├── my ...
- stenciljs 学习五 事件
组件可以使用Event Emitter装饰器发送数据和事件. Event 定义 参考: import { Event, EventEmitter } from '@stencil/core'; ... ...
- StreamSets 多线程 Pipelines
以下为官方文档: Multithreaded Pipeline Overview A multithreaded pipeline is a pipeline with an origin that ...
- node express 返回json object
web 开发的过程中我们经常需要返回对象的json 格式,使用node express 是比较简单的, 1.node express 基础网站的创建 比较简单,以前的文章有 2.编写对象并导出对象 / ...
- h5 的 audio 标签知识点
因为音频格式有版权,各浏览器使用不同的音频格式. 音频格式兼容性 音频格式 Chrome Firefox IE9 Opera Safari MP3 支持 不支持 支持 不支持 支持 OGG 支持 支持 ...
- win10禁用自动更新服务
win10禁用自动更新服务 按Win+R,打开运行,输入"services.msc"打开服务: 找到"Windows Update",选择属性,修改为禁用即可: ...
- VBox修改uuid
1.使用VBoxManage命令时,需要先在命令行中切换到VirtualBox的安装目录下 2.修改vdi的uuid:VBoxManage internalcommands sethduuid D: ...