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 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
随机推荐
- git的使用基础
/*游戏或者运动才能让我短暂的忘记心痛,现如今感觉学习比游戏和运动还重要——曾少锋*/ 在Git-Bash中配置自己的名字和Email: git config --global user.name & ...
- Dubbo 版 Helloworld
使用工具:MAVEN.IDEA.Spring.Dubbo.Zookeeper 直接上代码 项目结构: 步骤如下: 搭建MAVEN项目,添加相关依赖 pom.xml <!--Zookeeper-- ...
- SUST OJ 1674: 入侵与反击（最长不下降子序列）
1674: 入侵与反击 时间限制: 1 Sec 内存限制: 128 MB提交: 229 解决: 28[提交][状态][讨论版] 题目描述 A国部署的反导系统遇到了一个致命BUG,那就是每一次发射的 ...
- CTF-练习平台-Misc之 再来一道隐写
十二.再来一道隐写 下载文件后打开,用常用的几个方法都没有找到有用的信息,然后观察图片发现搞度有点低,所以用WinHex打开把图片高度改大,保存.再次打开图片发现flag
- L5负载均衡
L5负载均衡组件的功能职责 L5的功能特征如下: 名字服务:以SID(由模块ID和命令字ID组成)为关键字,通过SID取得真正的IP和端口地址,使得IP和端口配置对调用者透明,运维变更配置更方便: 负 ...
- 如何快速配好java环境变量和查看电脑上安装JDK的版本位数
今天一个新手在群里问自己的Eclipse打不开,然后我是属于那种热心肠的人,一般自己知道的就会告诉他们,看了下,是环境变量没有配好,反正我觉得配环境比较简单,现在就教大家简单的环境变量配法 path ...
- 创意：Soap一款新型的触摸式家用智能路由器
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/iefreer/article/details/34808749 Soap简单介绍 这里的Soap不是 ...
- C#编程之IList<T>、List<T>、ArrayList、IList, ICollection、IEnumerable、IEnumerator、IQueryable 和 IEnumerable的区别
额...今天看了半天Ilist<T>和List<T>的区别,然后惊奇的发现使用IList<T>还是List<T>对我的项目来说没有区别... 在C#中 ...
- hadoop之 Yarn 调度器Scheduler详解
概述 集群资源是非常有限的,在多用户.多任务环境下,需要有一个协调者,来保证在有限资源或业务约束下有序调度任务,YARN资源调度器就是这个协调者. YARN调度器有多种实现,自带的调度器为Capaci ...
- WebClient类
WebClient类提供向 URI 标识的资源发送数据和从 URI 标识的资源接收数据的公共方法. 其实就相当于创建一个请求客户端.可以获取网页和各种各样的信息,包括交互. 通过MSDN来看看WebC ...