HTML5之API
HTML5就是牛,可以直接播放音视频,还可以作图;
一、HTML5中播放视频和音频:
加载时直接播放音频的方式:new Audio("BY2.mp3").play();
<div>
<h1>播放器</h1>
<!--
controls:显示播放控件;
-->
<h3>视频</h3>
<video id="mpv" width="60%" height="30%" controls="controls">
<source src="1.mp4" type="video/mp4">
</video>
<h3>音频</h3>
<audio id="mp" controls="controls">
<source src="BY2.mp3" type="audio/mp3">
</audio> <script type="text/javascript">
var video = $("#mp")[0];
video.play();
</script>
简单播放器
二、可伸缩的矢量图形SVG:
Scalable Vector Graphics: 可伸缩Scalable是因为画的图是分辨率无关的;
一个简单的SVG时钟:
<div>
<h1>SVG时钟</h1>
<svg xmlns="http://www.w3.org/2000/svg" id="clock" viewBox="0,0,100,100" width="300" height="300">
<!-- 画圆形 -->
<circle cy="50" cx="50" r="45" fill= "#eff"/>
<!-- 刻度线和数字 -->
<g id="ticks">
<line x1="50" y1="5.000" x2="50.00" y2="10.00" />
<text x="46" y="18">12</text>
<line x1="50" y1="95.000" x2="50.00" y2="90.00" />
<text x="46" y="88">6</text>
<line x1="5" y1="50.000" x2="10.00" y2="50.00" />
<text x="12" y="52">9</text>
<line x1="95" y1="50.000" x2="90.00" y2="50.00" />
<text x="83" y="52">3</text>
</g>
<!-- 分针与时针 初始化指向12-->
<g id="hands">
<line id="hourhand" x1="50" y1="50" x2="50" y2="25"/>
<line id="minutehand" x1="50" y1="50" x2="50" y2="20" />
<line id="secondhand" x1="50" y1="50" x2="50" y2="15"/>
</g>
</svg>
</div> css:
<style type="text/css">
#clock{
stroke :black;
stroke-linecap: round;
}
g>text{
font-family: sans-serif;font-size: 6pt;
}
</style>
js:
function updateTime(){
var now = new Date();
var second = now.getSeconds();
var min = now.getMinutes();
var hour= (now.getHours()%12)+min/60;
var secondangele = second*6; //6°是一秒钟
var minangle = min*6; //6°是一分钟
var hourangle= hour*30; //30°是一小时
$("#hourhand").attr("transform","rotate("+hourangle+",50,50)");
$("#minutehand").attr("transform","rotate("+minangle+",50,50)");
$("#secondhand").attr("transform","rotate("+secondangele+",50,50)");
}
$(function(){
setInterval("updateTime()", 1000);
});
三、HTML5的<canvas>
IE9之前版本的浏览器不支持<canvas>;
修改<canvas>绘制的图形就必须把当前的擦除在重新绘制,而使用SVG绘制的图形,可以通过简单的移除相应的元素来修改图片;
<canvas id="my_canvas">
</canvas>
JS:
var c = $("#my_canvas")[0].getContext('2d');
c.beginPath(); //画线
c.lineTo(100,100);
//画圆 圆心x,y 半径r 开始和结束角度,弧形方向
c.arc(x,y,r,0,2*MATH.PI,false);
//画矩形 四个参数 左上顶点,长和宽;
c.fillRect(); c.strokeRect(); c.clearRect();c.rect()
四、获取地理位置:
function loc(){
if(navigator.geolocation){
var options = {
timeout:50000
};
var successCallback = function(pos){
$("#loc").html(pos.coords.accuracy+" meters latitude: "+
pos.coords.latitude+" longitude:"+ pos.coords.longitude);
};
var errorCallback = function(e){
$("#loc").html(e.code+":"+e.message);
};
// 获取当前位置
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)
}
};
//监测当前位置
navigator.geolocation.watchPosition(successCallback, errorCallback, options);
//停止监视位置
navigator.geolocation.clearWatch();
五、Web Worker:
解决客户端javaScript无法多线程的问题;Worker是指执行代码的并行线程;
一个简单的例子:
1、HTML代码:
<div>
<h2>Web Worker</h2>
<button onclick="computer()" value="10000的阶乘" type="button" >100000*10000循环</button>
<p id="result"></p>
<button onclick="computerWorker()" value="10000的阶乘" type="button" >WebWorker----100000*10000循环</button>
<p id="resultWorker"></p>
</div>
2、js代码:
function computer(){
var start= new Date().getTime();
var num = 1;
for (var int = 1; int < 100000; int++) {
for (var int2 = 0; int2 < 100000; int2++) {
num = int+num;
}
}
var end = new Date().getTime();
$("#result").html("计算结果:" +num + "==耗时:"+ (end-start));
} function computerWorker(){
var start = new Date().getTime();
var worker = new Worker('myworker.js');
worker.postMessage(100000);
var end = new Date().getTime();
worker.onmessage = function(e){
var num = e.data;
$("#resultWorker").html("计算结果:" +num + "==耗时:"+ (end-start));
} }
JS代码
onmessage = function(e){
console.log(e);
postMessage(computerNum(e.data));
}; function computerNum(numData){
console.log(numData);
var num = 1;
for (var int = 1; int < 100000; int++) {
for (var int2 = 0; int2 < 100000; int2++) {
num = int+num;
}
}
return num;
}
myworker.js
通过Worker()构造函数创建的新的Worker的时候,指定包含的JS代码会运行在一个全新的javaScript环境中,与其创建者脚本隔离;该新的运行环境有一个全局对象WorkerGlobalScope;WorkerGlobalScope有所有JavaScript全局对象拥有的那些属性,如JSON对象 isNaN函数和Date构造函数等,其还拥有一些客户端Window的一些属性,如self location navigator和几种计时器方法 setTimeout setInterval()等;测试时发现不支持doucment.get*等函数,可能还不支持文档交互,但是已经支持log输出(chrome);
六、二进制数据Blob和文件系统API:
1、Blob对象是JavaScript中代表二进制数据的对象;提供了操作二进制数据的接口,在其基础上,实现了FielList对象、File对象、FileReader对象等操作文件的API;在支持<input type="file">的浏览器中,元素上的files属性就是一个FileList对象,代表多个File对象,一个Flle对象就是一个Blob对象;FileReader对象可以访问Blob中的字符或字节;
<div>
<h2>文件上传</h2>
<input multiple="multiple" type="file" accept="*" onchange="fileInfo(this.files)"/>
</div> function fileInfo(files){
for (var int = 0; int < files.length; int++) {
var reader = new FileReader();
reader.readAsText(files[int]);
reader.onload = function(){
console.log(reader.result);
};
reader.onerror= function(e){
console.log("Error",e);
};
}
}
一个读取文件的小例子
2、创建或获取Blob的方法:
1、var bb = new Blob("text is hhh"); //传入字符创建新的blod;
2、bb = new BlobBuilder(); bb.append("text is hhhh"); //方便追加字符;
3、bb.silce(0,1024); //将Blob对象按照字节分块,返回新的Blob对象;
3、Blob URL:操作Blob,通过createObjectURL(blob)创建一个URL指向改Blob;
4、操作本地文件系统:
一、获取一个表示本地文件系统的对象:
1、Web Worker中使用 var fs = requestFileSystemSync(PERSISTENT,1024*1024); //传入有效期和大小参数;
2、使用全局函数获取:
var filesystem;
requestFileSystem(TEMPORARY,50*1024*1024,function(fs){
filesystem = fs;
}, function error(e){
console.log(e);
});
3、操作文件:测试时,不能操作啊!
七、WebSocket:
浏览器端代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聊聊</title>
<script type="text/javascript">
window.onload = function(){ var nick = prompt("who are you?");
var input = document.getElementById("input");
input.focus();
var div = document.createElement("div"); document.body.insertBefore(div, input); var socket = new WebSocket("ws://10.7.6.7/");
input.onchange = function(){
var msg = nick+":"+input.value;
scoket.send(msg);
var node = document.createTextNode(msg);
div.appendChild(node);
input.value = "";
}; input.onmessage = function(event){
var msg = event.data;
var node = document.createTextNode(msg);
div.appendChild(node)
input.scrollIntoView();
};
}
</script>
</head>
<body>
<input id="input" style="width: 100%" />
</body>
</html>
chat.html
node服务端代码:
var http = require("http");
var ws = require("webscoket-server"); var httpserver = new http.Server(); var clientui = require('fs').readFileSync("webchat.html"); httpserver.on("request",function(request,response){ if(request.url ==="/"){
response.writerHead(200,{"Content-Type":"text/html"});
response.write();
response.end();
}else{
response.writeHead(404);
response.end();
}
}); var wsserver = ws.createServer({server:httpserver});
wsserver.on("connection",function(socket){
scoket.send("w t caht room");
socket.on("message",function(msg){
wsserver.broadcast(msg);
});
}); wsserver.listen(8000);
scoket.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聊聊</title>
<script type="text/javascript"> </script>
</head>
<body>
<input id="input" style="width: 100%" />
</body>
</html>
HTML5之API的更多相关文章
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- HTML5 Drop API
转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言 在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5 ...
- Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!
继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...
- HTML5 File API — 让前端操作文件变的可能
前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...
- 开大你的音响,感受HTML5 Audio API带来的视听盛宴
话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等 ...
- html5 history api
1.html5 history api适用场景,个人理解最大的用处是配合ajax使用,使ajax拥有回退.前进的用户体验. 2.代码(dive into html5中的一个小例子) 1)fer.htm ...
- HTML5 history API实践
一.history API知识点总结 在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: history.forward();//在历史记录中前 ...
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- html5 drag api详解
可以夸张点说,如果你不会拖拽,你不是一个合格的前端开发. 回想下,以前我们是怎么实现拖拽的,主要有以下几步: 1.目标元素绑定mousedown事件,记录下此时鼠标位置和拖拽元素的位置差,分别是 di ...
- html5 Canvas API
详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...
随机推荐
- 原生js使用forEach()与jquery使用each遍历数组,return false 的区别
原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...
- jqueryAPI使用之选择器
好一段时间没有更新博文了.刚学习完JS基础知识后,也进入到了JQ的学习.为了能熟练掌握JQ的使用,最好的方法就是反复多练,讲JQ中的API的每个知识点都练习一遍.如果能做到这个,那么对JQ就没那么陌生 ...
- Android—自定义标题栏的实现及遇见的问题解决
开发者设计界面时候往往不会使用系统自带的标题栏,因为不美观,所以需要自己设置标题栏. 1.根据需求在xml文件中设置标题布局 <?xml version="1.0" enco ...
- android 修改videoview的宽度和高度
如果直接用android的videoview.他是不允许你随意的修改宽度和高度的,所以我们要重写videoview! package com.hysmarthotel.view; import and ...
- iOS 学习 - 17.Socket
Socket 是应用层与 TCP / IP 协议通信的中间软件抽象层,它是一组接口 TCP:面向连接.传输可靠(保证数据正确性,保证数据顺序).用于传输大量数据(流模式).速度慢,建立连接需要开销 ...
- ToolBar和DrawerLayout的使用实现侧拉栏抽屉的开闭
1.如图可以看到textColorPrimary,colorPrimary,colorPrimaryDark,navigationBarColor等颜色属性代表的相应位置,如下图 2.具体属性在res ...
- (五)Maven目录结构及常用命令说明
前面提到的部分知识有涉及到Maven目录结构与Maven常用的一些命令,在这里专门给大家做个简单的介绍. 1.Maven目录结构说明 Maven总体目录结构如下图: bin目录:该目录包含了mvn运行 ...
- CouchDB简介
类型:开源数据库,Apache项目 存储格式:JSON 查询语言:JavaScript API :MapReduce.HTTP 特点 MVCC(Multiversion concurrency con ...
- 分布式集群系统下的高可用session解决方案
目前,为了使web能适应大规模的访问,需要实现应用的集群部署. 而实现集群部署首先要解决session的统一,即需要实现session的共享机制. 目前,在集群系统下实现session统一的有如下几种 ...
- 【从零开始学习Hadoop】--2.HDFS分布式文件系统
1. 文件系统从头说2. Hadoop的文件系统3. 如何将文件复制到HDFS3.1 目录和文件结构3.2 FileCopy.java文件的源代码3.3 编译3.4打包3.5 运行3.6 检查结果 1 ...