您的位置:首页 > Web前端 > HTML5

html5 离线存储 worker

2016-04-28 14:36 489 查看
html5 离线存储

<!DOCTYPE html>
<html manifest="cache.manifest">       <!--manifest存储-->
<head lang="en">
<meta charset="UTF-8">
<title>html5 离线存储  小应用</title>
</head>
<body>
1.在服务器如,apache 的httpd.conf 添加
AddType text/cache-manifest .manifest
2.顶部添加  manifest存储
3.编辑 cache.manifest

cache.manifest(文件名)
//以下是文件内容,缓存了一张图片
CACHE MANIFEST
2.png

</body>
</html>


html5 worker

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
html5 worker 在服务器后台创建一个线程,加快程序运行。
<script>
var w1 = new Worker('test.js');
w1.postMessage('hi');
w1.onmessage = function(ev){    //  把一部分数据处理交给  html5  worker处理,
alert( ev.data );
};
</script>
<!--
test.js 文件

self.onmessage = function(ev){
self.postMessage(ev.data + '妙味课堂');   // 对数据进行处理,再返回
};

-->
</body>
</html>


内容编辑 语言输入 桌面提醒

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--内容编辑 contenteditable="true"-->
<div contenteditable="true" style="height:200px; width:200px; background:red;">aaaaaaaaaaa</div>
<!--语言输入   谷歌支持  可以录音输入   谷歌支持-->
<input type="text" x-webkit-speech />

<!--桌面提醒 谷歌支持-->
<script>
window.webkitNotifications.requestPermission();
statue = window.webkitNotifications.checkPermission();
var notification =window.webkitNotifications.createNotification("[imgurl]","Title","Body");
notification.show();
</script>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: