h5修改服务器数据,H5获取地理位置+自动更新服务器数据+WebWorker的使用+H5缓存的使用...

H5获取地理位置

html>

Insert title here

获取当前位置坐标:

Click me

var x = document.getElementById("demo");

function getLocation(){

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition);

}else{

x.innerHTML="该浏览器不支持获取地理位置!";

}

}

function showPosition(position) {

x.innnerHTML = "纬度：" + position.coords.latitude + "
经度：" + position.coords.longitude;

}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

自动更新服务器数据：(服务端需设置content_type为text/event-stream)

html>

content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

获取服务端更新数据

if (typeof (EventSource) !== "undefined") {

var source = new EventSource("http://localhost:8081/web/test/sse.do");

source.onmessage = function(event) {

alert("1");

document.getElementById("result").innerHTML += event.data + "
";

};

} else {

document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 server-sent 事件...";

}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

WebWorker的使用：

html>

计数： 

开始工作

停止工作

注意： Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.

var w;

function startWorker() {

if(typeof(Worker) !== "undefined") {

if(typeof(w) == "undefined") {

w = new Worker("demo_workers.js");

}

w.onmessage = function(event) {

document.getElementById("result").innerHTML = event.data;

if(event.data == "50"){

stopWorker();

}

};

} else {

document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";

}

}

function stopWorker() {

w.terminate();

w = undefined;

}

demo_workers.js :

var i=60;

function timedCount() {

i=i-1;

postMessage(i);

setTimeout("timedCount()",1000);

}

timedCount();

H5缓存的使用:

html>

获取日期和时间

/manifest/test.appcache

CACHE MANIFEST

#version 1.1.8 2015-11-06 15:30:22

CACHE:

../js/demo_time.js

../images/header.png

NETWORK:

*

FALLBACK: