欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML >

HTML基础必学列表

HTML基础第八天

 复习:

HTML5新特性: 优先级

(1)新的标签和属性 10

(2)表单新特性 7

(3)视频和音频 9

(4)Canvas绘图——位图 10

(5)SVG绘图——矢量图 10

svg、rect、circle、ellipse、line、polyline、polygon、text、image、path

(6)地理定位 2

(7)拖放API 5

(8)WebWorker 4

(9)WebStorage 10

(10)WebSocket 3

今日目标:

(1)地理定位 —— 了解

(2)拖放API —— 稍难&掌握

1.补充:第三方绘图工具库的使用——Two.js

(1)找到官网,看官方的定义

https://two.js.org/

Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.

是一个2D绘图函数库,用于浏览器,底层可以是SVG、Canvas或WebGL。

 

(2)找示例程序,写出demo

 

(3)使用API Document,编写自己的应用

 

上述代码完成则“获得工作”!

2.HTML5新特性之六 —— 地理定位

Geolocation:用于获得当前浏览器所在的地理坐标,从而提供LBS(Location Based Service),如送餐、打车、导航。包括如下数据:

经度: longitude

纬度: latitude

海拔高度: altitude

速度: speed

浏览器如何获得上述数据:

(1)手机浏览器:

首先尝试使用内置GPS数据——精度以米为单位

再则使用手机基站编号反向推导出对应的地理位置——定位精度以公里为单位

(2)PC浏览器

通过电脑的IP地址反向查询——精度以公里为单位

HTML5中如何获取浏览器所在的地理定位信息:

window.navigator.geolocation {

getCurrentPosition: fn //获取当前定位数据

watchPosition: fn //监视定位数据

clearWatch: fn //清除定位监视

}

演示:如何获取当前的定位信息:

navigator.geolocation.getCurrentPosotion(

function(pos){

console.log('定位数据获取成功');

//pos.coords.longtitude ....

},

function(err){

console.log('定位数据获取失败');

//err.code err.message

}

)

2.课外扩展:使用百度地图API——第三方地图的使用

(1)打开官网,找定义,功能说明

http://lbsyun.baidu.com/

可以基于百度地图进行Android、iOS、Web应用开发

http://lbsyun.baidu.com/index.php?title=jspopular

(2)找示例程序

 

(3)找API文档,编写自己的应用

使用百度地图API步骤:

(1)注册百度开发者账号

(2)使用开发者账号申请创建一个Web应用账号,获取一个访问百度地图的密钥(AccessKey)

http://lbsyun.baidu.com/apiconsole/key

 

 

(3)编写HTML网页,出示当前网站的访问密钥,调用百度地图API

<script src="http://api.map.baidu.com/api?v=2.0&ak=您的网站在百度地图申请的访问秘钥 ">

</script>

//创建地图实例

var map = new BMap.Map("container");

//创建一个指定的点 —— 文博大厦

var p = new BMap.Point(116.300982,39.915907);

//以指定点为中心显示地图

map.centerAndZoom(p, 17);

4.HTML5新特性之七 —— 拖放API —— 稍难&掌握

Drag:拖动

Drop:释放

在HTML5之前只能使用鼠标事件模拟出“拖放”效果;HTML5专门为拖放提供了7个事件句柄。

 

拖动的源对象可以触发的事件:

(1)ondragstart:源对象开始被拖动

(2)ondrag:源对象被拖动过程中(鼠标可能在移动也可能未移动)

(3)ondragend:源对象被拖动结束

拖动源对象可以进入到上方的目标对象可以触发的事件:

(1)ondragenter:目标对象被源对象拖动着进入

(2)ondragover:目标对象被源对象拖动着悬停在上方

(3)ondragleave:源对象拖动着离开了目标对象

(4)ondrop:源对象拖动着在目标对象上方释放/松手

注意:必须组织dragover事件的默认行为,才可能触发drop事件!

练习:

(1)实现一个可以随着鼠标拖动而移动的小飞机

提示:飞机必须绝对定位;ondrag事件处理中获取事件发生的坐标值。

(2)拖动着某个小飞机到垃圾桶上方时,垃圾桶由半透明变为不透明;当拖动着离开 或 在上方释放 垃圾桶又变为半透明;

(3)总共显示三个小飞机,拖动着某个小飞机到垃圾桶上方后,小飞机从DOM树上删除

5.如何在拖动的源对象事件和目标对象事件间传递数据

HTML5为所有的拖动相关事件提供了一个新的属性:

e.dataTransfer { //数据传递对象——作用相当于拖拉机

}

用于在源对象和目标对象的事件间传递数据,

源对象上的事件处理中保存数据:

e.dataTransfer.setData( k, v ); //k-v必须都是string

目标对象上的事件处理读取数据:

var v = e.dataTransfer.getData( k );

课后练习: 英雄选择

 

HTML基础第八天

HTML基础第八天要求:

拖动某架飞机到目标区域,则在上方显示出该飞机;下方该飞机图消失;替换选中区域已有的飞机。

拖动另一架飞机到目标区域,则显示出该飞机,之前选中的飞机变为重新回到待选区域。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h50808.shtml

我要分享到:
上一篇:HTML 符号
下一篇:html表单元素-html教程

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-08-29 22:33 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。