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的更多相关文章

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

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

  2. HTML5 Drop API

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

  3. Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!

    继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...

  4. HTML5 File API — 让前端操作文件变的可能

    前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

  5. 开大你的音响,感受HTML5 Audio API带来的视听盛宴

    话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等 ...

  6. html5 history api

    1.html5 history api适用场景,个人理解最大的用处是配合ajax使用,使ajax拥有回退.前进的用户体验. 2.代码(dive into html5中的一个小例子) 1)fer.htm ...

  7. HTML5 history API实践

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

  8. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  9. html5 drag api详解

    可以夸张点说,如果你不会拖拽,你不是一个合格的前端开发. 回想下,以前我们是怎么实现拖拽的,主要有以下几步: 1.目标元素绑定mousedown事件,记录下此时鼠标位置和拖拽元素的位置差,分别是 di ...

  10. html5 Canvas API

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

随机推荐

  1. iOS 开发学习资料整理(持续更新)

      “如果说我看得比别人远些,那是因为我站在巨人们的肩膀上.” ---牛顿   iOS及Mac开源项目和学习资料[超级全面] http://www.kancloud.cn/digest/ios-mac ...

  2. Thrift-java实例

    ➠更多技术干货请戳:听云博客 Thrift实例1 功能描述:客户端与服务器端分别是两个应用,先启动服务器端,再启动客户端,实现执行客户端运行服务器端的加法方法. 源码截图(源码在附件中): 客户端: ...

  3. CocoaPods升级安装三方库报错

    CocoaPods升级后(最新版本1.0.1),安装第三方库的时候会报如下错误: The dependency `AFNetworking (~> 3.1.0)` is not used in ...

  4. Windows平台下利用APM来做负载均衡方案 - 负载均衡(下)

    概述 我们在上一篇Windows平台分布式架构实践 - 负载均衡中讨论了Windows平台下通过NLB(Network Load Balancer) 来实现网站的负载均衡,并且通过压力测试演示了它的效 ...

  5. [Erlang 0104] 当Erlang遇到Solr

        Joe Armstrong的访谈中有一段关于"打开黑盒子"的阐述,给我留下很深的印象:Joe Armstrong在做XWindows开发时没有使用对应的类库,而是在了解XW ...

  6. 长见识了,知道了collected和Graphite 这两个东东

    今天下午的讨论会议中,听到了两个名词collected和Graphite这是神马东东,以前在bingo的时候也没听说过,开完会下去查了下.原来他两是监控系统的啊.以前也从来没做过系统监控方面的项目,这 ...

  7. awk-笔记

    语法形式: awk [options] 'script' var=value file1 [file...] awk [options] -f scriptfile var=value file [f ...

  8. 使用github之前的技能准备

    Git的导入 介绍 Git属于分散型版本管理系统,是为版本管理而设计的软件.版本管理就是管理更新的历史记录.它为我们提供了一些在软件开发过程中必不可少的功能,例如记录一款软件添加或更改源代码的过程,回 ...

  9. Comparison of SQL Server Compact, SQLite, SQL Server Express and LocalDB

    Information about LocalDB comes from here and SQL Server 2014 Books Online. LocalDB is the full SQL ...

  10. 报表软件JS开发引用HTML DOM的location和document对象

    上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows.location.document三种.这次就继续介绍后两种,locati ...