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(示例代码)相关推荐
- html5获取gps坐标,html5获取手机GPS信息的示例代码
html5获取手机GPS信息的示例代码function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCu ...
- Python API 撰写的 TensorFlow 示例代码
Python API 撰写的 TensorFlow 示例代码 import tensorflow as tf import numpy as np # 使用 NumPy 生成假数据(phony dat ...
- html5网站粒子时钟,Html5 canvas实现粒子时钟的示例代码
这篇文章主要介绍了Html5 canvas实现粒子时钟的示例代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 我们先看看粒子时钟的效果,如下: 下面我们将通过canvas和js实 ...
- 心电图特效代码 html5,用canvas画心电图的示例代码
本文介绍了用canvas画心电图的示例代码,分享给大家,具体如下: 效果图: 思路: ?1.模拟点(如果你有真实的数据,那就是把数据幻化成canvas对应的坐标点) ? 模拟点时注意的点就是高起部分需 ...
- 如何用html5实现网页聊天,HTML5 WebSocket实现点对点聊天的示例代码
HTML5的websocket与Tomcat实现了多人聊天,那是最简单也是最基本的,其中注意的就是开发环境,要满足jdk1.7和tomcat8,当然了tom7的7.063也行,在网站上找到了用goog ...
- android 音视频流采集,Android 音视频开发(四):使用 Camera API 采集视频数据(示例代码)...
本文主要将的是:使用 Camera API 采集视频数据并保存到文件,分别使用 SurfaceView.TextureView 来预览 Camera 数据,取到 NV21 的数据回调. 注: 需要权限 ...
- 快递鸟android_YII2 使用快递鸟api跟踪物流查询(示例代码)
namespacecommonutils;classKdniao {//填写你自己申请的快递鸟的配置 private $EBusinessID = '000000';private $AppKey = ...
- html5列表标签代码,HTML5列表标签和表格标签(示例代码)
一.列表 1.1 什么是列表标签? 作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一对数据是一个整体 无序列表---unordered-list(最多):新闻列表.导航.商品列表 作用: ...
- codesmith 模板 html5,js-template-art【二】语法(示例代码)
一.模板语法 1.变量使用与输出 或: {{ifuser}} {{user.name}} {{/if}} art-template 同时支持 {{expression}} 简约语法与任意 JavaSc ...
- android html5 加密,android studio MD5加密 示例代码
md5加密法核心源码 package com.study.luoki; import android.app.*; import android.os.*; import android.widget ...
最新文章
- 分子偶极矩大小如何判断_润滑油粘度大小该如何判断你知道吗?
- ORACLE数据库之PL/SQL触发器、rownum、动态SQL、数据库之视图与索引
- 趣说API HTTP 状态码的使用
- 如何使用SAP CRM增强工具AET创建Table表格类型的增强
- 算法题目——生成括号匹配
- 计算机原理与应用简称,基础知识-计算机原理与应用.ppt
- java修改原有txt文件_(转)Java创建txt文件并进行读、写、修改操作
- oracle和mysql文件怎么打开_mysql与oracle数据库停止与打开的批处理文件
- 计算机设计大赛材料准备讲解
- 笔记本电池不充电了 无法充电 如何激活
- 天然气阶梯是按年还是按月_天然气阶梯不是明年1月1号开始么?怎么现在充气就限量了...
- matlab 输出 syms,matlab中latex和syms的完美结合
- 王倩兮金碧山水作品《绿水青山就是金山银山》
- Swap Adjacent Elements CodeForces - 920C
- MySQL解压版安装及配置(本地windows环境)
- PS超简单的扣人像方法
- Esxi5.5添加4T报错的问题
- 【BIT2021程设】7. 一夜发白《千字文》——Unicode和UTF-8、位运算
- android开启照相功能,Android打开系统相机并拍照的2种显示方法
- 计算机测控技术论文,计算机测控技术论文(2)
热门文章
- 视图的数据存放在哪里_分布式 | DBLE 是如何实现视图的?
- Linux命令终端提示符显示-bash-4.2#解决方法【转载】
- git 创建webpack项目_webpack项目的搭建及环境构建
- python编程软件排行榜_Python编程开发工具:这10个对Web开发者最有用的Python包
- go channel 缓冲区最大限制_Go语言11周年,泛型问题有望明年得到解决
- php redis与me m,Redis(十) —— 为php增加redis扩展
- django调用java_07.手把手教将深度学习利用Django将模型发布成服务供java调用
- docker portainer_「实战篇」开源项目docker化运维部署-Portainer管理集群部署(十)...
- css鼠标变成小手_技巧篇:CSS高级技巧详解
- 打开多个界面_如何创建用户界面