html5之api,HTML5之API(示例代码)
HTML5就是牛，可以直接播放音視頻，還可以作圖；
一、HTML5中播放視頻和音頻：
加載時直接播放音頻的方式：new Audio("BY2.mp3").play();
播放器
視頻
音頻
var video = $("#mp")[0];
video.play();
簡單播放器
二、可伸縮的矢量圖形SVG：
Scalable Vector Graphics: 可伸縮Scalable是因為畫的圖是分辨率無關的;
一個簡單的SVG時鐘：
SVG時鐘
12
6
9
3
css:#clock{stroke:black;stroke-linecap:round;}g>text{font-family:sans-serif;font-size:6pt;
}
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的
IE9之前版本的瀏覽器不支持；
修改繪制的圖形就必須把當前的擦除在重新繪制，而使用SVG繪制的圖形，可以通過簡單的移除相應的元素來修改圖片；
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代碼：
Web Worker
100000*10000循環
WebWorker----100000*10000循環
2、js代碼：
functioncomputer(){var start= newDate().getTime();var num = 1;for (var int = 1; int < 100000; int++) {for (var int2 = 0; int2 < 100000; int2++) {
num= int+num;
}
}var end = newDate().getTime();
$("#result").html("計算結果:" +num + "==耗時："+ (end-start));
}functioncomputerWorker(){var start = newDate().getTime();var worker = new Worker(\'myworker.js\');
worker.postMessage(100000);var end = newDate().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));
};functioncomputerNum(numData){
console.log(numData);var num = 1;for (var int = 1; int < 100000; int++) {for (var int2 = 0; int2 < 100000; int2++) {
num= int+num;
}
}returnnum;
}
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；在支持的瀏覽器中，元素上的files屬性就是一個FileList對象，代表多個File對象，一個Flle對象就是一個Blob對象；FileReader對象可以訪問Blob中的字符或字節；
文件上傳
functionfileInfo(files){for (var int = 0; int < files.length; int++) {var reader = newFileReader();
reader.readAsText(files[int]);
reader.οnlοad= function(){
console.log(reader.result);
};
reader.οnerrοr= 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、使用全局函數獲取：
varfilesystem;
requestFileSystem(TEMPORARY,50*1024*1024,function(fs){
filesystem=fs;
},functionerror(e){
console.log(e);
});
3、操作文件：測試時，不能操作啊！
七、WebSocket:
瀏覽器端代碼：
聊聊window.οnlοad= function(){varnick=prompt("who are you?");varinput=document.getElementById("input");
input.focus();vardiv=document.createElement("div");
document.body.insertBefore(div, input);varsocket= newWebSocket("ws://10.7.6.7/");
input.οnchange= function(){varmsg=nick+":"+input.value;
scoket.send(msg);varnode=document.createTextNode(msg);
div.appendChild(node);
input.value= "";
};
input.onmessage= function(event){varmsg=event.data;varnode=document.createTextNode(msg);
div.appendChild(node)
input.scrollIntoView();
};
}
chat.html
node服務端代碼：
var http = require("http");var ws = require("webscoket-server");var httpserver = newhttp.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
聊聊總結
以上是生活随笔為你收集整理的html5之api,HTML5之API(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 23种设计模式之状态模式
- 下一篇： ef mysql 外键 一对一_MySQ