1:视频播放器

2:地理定位

  我们的支持html5 的浏览器给我们提供一个接口(api),可以用来获取你当前的位置.

  主要是通过geolocation(地理位置),对象 ,去访问硬件,来获取到经纬度..

  if (navigator.geolocation){
  navigator.geolocation.getCurrentPosition(showPosition);
} else{
  x.innerHTML="Geolocation is not supported by this browser.";}
}

   我们获取到的是一个经纬度。我们调用地图。我们调用百度地图.(街景地图)

3: 拖拽
html5 里面支持拖拽
  1)当前拖拽的元素
    ondrag 应用于拖拽元素,整个拖拽过程都会调用
    ondragstart 应用于拖拽元素,当拖拽开始时调用
    ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用
    ondragend 应用于拖拽元素,当拖拽结束时调用
  2)目标元素
    ondragenter 应用于目标元素,当拖拽元素进入时调用
    ondragover 应用于目标元素,当停留在目标元素上时调用
    ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
    ondragleave 应用于目标元素,当鼠标离开目标元素时调用

4: web 存储
  我们通过sessionStorage 和 localStorage 这两个对象可以向本地保存数据。

 setItem(key,value)
getItem();
removeItem();
clear();

  通过这个对象sessionStorage 演示了这四个方法. (设计到数据的操作就是增删改查..)
localStorage 保存数据 ;方法的一样的
sessionStorage 与 localStorage 区别
  ①localStorage 的数据永久保存
  ②sessionStorage 关闭浏览器就没有了

5:应用级别的缓存(缓存文件,css,js 图片.)
  我们新建一个html 文件 然后我要为这个html 文件制定缓存的
  首先第一步,我要新建一个 demo.appcache
  然后在html 里面引用这个 demo.appcache 文件
  manifest="demo.appcache"
  然后我们要指定缓存的数据 ,在 demo.appcache 缓存文件里面指定

第一行:
CACHE MANIFEST
我需要指定那些文件需要缓存
CACHE:
需要缓存的文件的路径
NETWORK:
那些文件需要网络才能访问.

那些牛掰的 HTML5的API(二)的更多相关文章

  1. HTML5 Geolocation API地理定位整理(二)

    Geolocation 实例demo 1.使用watchPosition()监听客户端位置 var watchOne=null; if (navigator.geolocation) { //watc ...

  2. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  3. HTML5 Drop API

    转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5 ...

  4. HTML5 history API实践

    一.history API知识点总结 在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: history.forward();//在历史记录中前 ...

  5. html5 Canvas API

    详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...

  6. HTML5 File api 实现断点续传

    目前市场上大多数的网站的断点上传都是需要安装浏览器插件的,本文就针对高级浏览器的环境下,通过HTML5 File api实现断点上传进行说明 一.实现文件多选 HTML5的<input>新 ...

  7. HTML5 Geolocation API工作原理[转载]

    大家都知道,HTML5 Geolocation 可以使用 IP 地址.基于 Web 的数据库.无线网络连接和三角测量或 GPS 技术来确定经度和纬度. 问题: 在一个基于地理位置服务的个人业余项目(小 ...

  8. HTML5 Geolocation API地理定位整理(一)

    HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9+, ...

  9. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

随机推荐

  1. python的**和*

    1.**两个乘号就是乘方,比如2**4,结果就是2的4次方,结果是16一个乘号*,如果操作数是两个数字,就是这两个数字相乘,如2*4,结果为8*如果是字符串.列表.元组与一个整数N相乘,返回一个其所有 ...

  2. js实现二分查找

    二分查找需要数组是有序的,1.先从有序数组的最中间元素开始查找,如果和要查找的元素相等,直接返回索引,若不相等则下一步.2.如果指定的元素大于或者小于中间元素,则在大于或小于的那一半区域内查找,重复第 ...

  3. Eclipse中文乱码解决方案

    Eclipse中文乱码解决方案 1)第一个设置:window>perferences>general>workspace>text file encoding 2)Jsp编码问 ...

  4. [MYSQL笔记0]MYSQL的安装

    mysql是一种关系型数据库管理系统.以mysql5.7版本为例,安装过程如下: 首先百度出mysql的官网,进入:(以下是自己安装失败的过程,直接下拉最后看大佬的安装过程吧,就是那个红红的网址) 找 ...

  5. egg- 配置

    1. model module.exports = app => { const { INTEGER, STRING, TEXT } = app.Sequelize; const User = ...

  6. kafka单机环境搭建及其基本使用

    最近在搞kettle整合kafka producer插件,于是自己搭建了一套单机的kafka环境,以便用于测试.现整理如下的笔记,发上来和大家分享.后续还会有kafka的研究笔记,依然会与大家分享! ...

  7. ethereum(以太坊)(一)

    从这周开始,开始学习以太坊开发--solidity,开始决定往区块链方向发展,毕竟区块链技术应用广泛.一开始接触solidity开发语言不太习惯,毕竟一直在学习python语法,有很多都不能接受.有难 ...

  8. C++ Primer 学习笔记_Chapter4 数组和指针–指针

    一.什么是指针? 指针与迭代器一样,指针提供对其所指对象的间接访问,指针保存的是另一个对象的地址: string s("hello"); string *ps = &s; ...

  9. Redis ---------- 持久化(AOF)操作

    每小时做一次快照持久化 8:00 快照持久化 9:00 快照持久化 10:00  快照持久化  上帝想玩弄人类,突然停电,55万个key丢失了 11:00 快照持久化 解决方案: 8:00-9:00在 ...

  10. 操作 Java 数组的 12 个最佳方法

    1.  声明一个数组 Java代码: String[] aArray = new String[5]; String[] bArray = {"a","b",& ...