首页 > 代码库 > HTML5之API

HTML5之API

2024-08-20 07:00:12   222人阅读

HTML5就是牛，可以直接播放音视频，还可以作图；

一、HTML5中播放视频和音频：

　　加载时直接播放音频的方式：new Audio("BY2.mp3").play();

技术分享 
 <div>
      <h1>播放器</h1>
      <!-- 
          controls：显示播放控件;
       -->
      <h3>视频</h3>
      <video id="mpv" width="60%" height="30%" controls="controls">
          <source src="http://www.mamicode.com/1.mp4" type="video/mp4">
      </video>
      <h3>音频</h3>
      <audio id="mp" controls="controls">
              <source src="http://www.mamicode.com/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


联系
我们