HTML基础第八天

2019-09-08 郑州网站建设  

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.日志('定位数据获取成功');

//pos.coords.longtitude ....

},

function(err){

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

//err.code err.message

}

)

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

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

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

?title=jspopular

(2)找示例程序

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

使用baidu地图API步骤:

(1)注册baidu开发者账号

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

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

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

</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://tzchb.ieyo.com/seo/1248.html转载请标明出处,谢谢合作!
标签:
  • HTML5
  • HTML
  • 特性
  • 复习
  • 优先