@EncyKe
2015-12-24T04:16:45.000000Z
字数 18757
阅读 2728
前端
<header>
:定义 section 或 page 的页眉; <hgroup>
:标题群组; <nav>
:定义导航链接; <section>
:定义 section; <aside>
:定义页面内容之外的内容; <footer>
:定义 section 或 page 的页脚; <datalist>
:定义下拉列表; <audio>
:定义声音内容; <source>
:定义媒介源; <video>
:定义视频; <wbr>
:定义视频; <command>
:定义命令按钮; <time>
:定义日期/时间; <bdi>
:定义文本的文本方向,使其脱离其周围文本的方向设置; <mark>
:定义有记号的文本; <meter>
:定义预定义范围内的度量; <progress>
:定义任何类型的任务的进度; <rp>
:定义若浏览器不支持 ruby 元素显示的内容; <rt>
:定义 ruby 注释的解释; <ruby>
:定义 ruby 注释; <keygen>
:定义生成密钥; <output>
:定义输出的一些类型; <track>
:定义用在媒体播放器中的文本轨道; <details>
:定义元素的细节; <dialog>
:定义对话框或窗口; <summary>
:为 元素定义可见的标题; <embed>
:为外部应用程序(非 HTML)定义容器;<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<html manifest="notetoself.manifest">
,其中notetoself.manifest含:CACHE MANIFEST以及CACHE(此节存放要缓存的图片);AddType text/cache-manifest .manfest
;draggable: true;
。querySelectorAll
:document.querySelectorAll("");
选取CSS选择器,语法同CSS;querySelector
:语法同上;
<form id="" method="">
<hgroup>
</hgroup>
<fieldset>
<legend>
</legend>
<div>
<label for="">
</label>
<input id="" name="" placeholder="(文本占位符)"
type=""
required aria-required="true"(必填项 range/color/button/hidden不可用)
autofocus(光标跟随)
autocomplete="off"(禁止浏览器自动填写 可加在form本身上)
list="_(自定义名称,在新的datalist下拉弹出选项)"
/>
<datalist id="(上述list名称)" >
<select>
<option value=""></option>
<option value=""></option>
<option value=""></option>
…
</select>
</datalist>
</div>
</fieldset>
</form>
type="text"
type="email"
type="url"
type="tel"
type="search"
type="color"
type="number" min="(数值)" max="(数值)"
type="range" min="(数值)" max="(数值)"
(滑动条效果) type="pattern"
(正则表达式)type="date"
→2014-12-02 type="month"
→2014-12 type="week"
→2014-W49 type="time"
→20:48 type="datetime"
→2014-12-02T12:49:00+8:00 type="datetime-local"
→2014-12-02T20:49:00input: required;
:必填表单域; input: focus: invalid;
:当前聚焦的含非法输入值的表单域; input: focus: valid;
:当前聚焦的含合法输入值的表单域。
<video
id=""
src=""
width="" height=""
controls (显示按钮,控制按钮的外观应浏览器不同而不同)
autoplay (自动播放,不建议)
preload="auto/none/metadata" (播放前是否下载视频)
loop (循环播放)
poster="" (视频缩略图路径)
>
<source src="video/preroll.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
(Mp4格式:Safari, IE9+)
<source src="video/preroll.ogv" type='video/ogg; codecs="theora, vorbis"'>
(ogv格式:FF, Opera)
<source src="video/preroll.webm" type='video/webm; codecs="vp8, vorbis"'>
(WebM格式:Chrome)
<p>Sorry, your browser doesn't support the video element</p> (指出浏览器不兼容video)
</video>
HTML5规范允许采用任何视频格式,但具体的支持由浏览器决定——
Mp4容器:H.264视频编码+AAC音频编码;
WebM容器:Vp8视频编码+Vorbis音频编码;
Ogg容器:Theora视频编码+Vorbis音频编码;
var position = 0;
var playlist;
var video;
window.onload = function() {
playlist = ["video/preroll",
"video/areyoupopular",
"video/destinationearth"];
video = document.getElementById('video');
video.addEventListener("ended", nextVideo, false);
//addEventListener()方法增加事件监听:
//“ended”表视频播放结束,调用函数,默认一般为flase(除非编写高级代码)
video.src = playlist[position] + getFormatExtension();
video.load(); //加载视频
video.play(); //播放视频
};
function nextVideo() {
position++;
if (position >= playlist.length) {
position = 0;
}
video.src = playlist[position] + getFormatExtension();
video.load();
video.play();
}
function getFormatExtension() {
if (video.canPlayType("video/mp4") != "") {
return ".mp4";
} else if (video.canPlayType("video/ogg") != "") {
return ".ogv";
} else if (video.canPlayType("video/webm") != "") {
return ".webm";
}
}
//canPlayType()方法将返回三个值:"probably"、"maybe"、""(空串表完全无法播放)
function setEffect(e) {
var id = e.target.getAttribute("id");
if (id == "normal") {
pushUnpushButtons("normal", ["western", "noir", "scifi"]);
effectFunction = null;
} else if (id == "western") {
pushUnpushButtons("western", ["normal", "noir", "scifi"]);
effectFunction = western;
} else if (id == "noir") {
pushUnpushButtons("noir", ["normal", "western", "scifi"]);
effectFunction = noir;
} else if (id == "scifi") {
pushUnpushButtons("scifi", ["normal", "western", "noir"]);
effectFunction = scifi;
}
}
//以上四个按钮为单选按钮,调用下文的pushUnpushButton函数
function handleControl(e) {
var id = e.target.getAttribute("id");
var video = document.getElementById("video");
if (id == "play") {
pushUnpushButtons("play", ["pause"]);
if (video.ended) {
video.load();
}
video.play();
} else if (id == "pause") {
pushUnpushButtons("pause", ["play"]);
video.pause();
} else if (id == "loop") {
if (isButtonPushed("loop")) {
pushUnpushButtons("", ["loop"]);
} else {
pushUnpushButtons("loop", []);
}
video.loop = !video.loop; //取反值
} else if (id == "mute") {
if (isButtonPushed("mute")) {
pushUnpushButtons("", ["mute"]);
} else {
pushUnpushButtons("mute", []);
}
video.muted = !video.muted; //取反值
}
}
//play和pause是单选按钮,但loop和mute为开关按钮
function pushUnpushButtons(idToPush, idArrayToUnpush) {
if (idToPush != "") {
var anchor = document.getElementById(idToPush);
var theClass = anchor.getAttribute("class");
if (!theClass.indexOf("selected") >= 0) {
theClass = theClass + " selected";
anchor.setAttribute("class", theClass);
var newImage = "url(images/" + idToPush + "pressed.png)";
anchor.style.backgroundImage = newImage; //通过改变CSS中的背景图片实现
}
}
for (var i = 0; i < idArrayToUnpush.length; i++) {
anchor = document.getElementById(idArrayToUnpush[i]);
theClass = anchor.getAttribute("class");
if (theClass.indexOf("selected") >= 0) {
theClass = theClass.replace("selected", "");
anchor.setAttribute("class", theClass);
anchor.style.backgroundImage = "";
}
}
}
//pushUnpushButton函数实现单选效果按钮
function isButtonPushed(id) {
var anchor = document.getElementById(id);
var theClass = anchor.getAttribute("class");
return (theClass.indexOf("selected") >= 0);
}
//isButtonPushed判定按钮是否被触发
function endedHandler(e) {
pushUnpushButtons("", ["play"]);
}
//播放完毕后play按钮弹起
需用两个canvas遮罩video,#buffer用作缓冲区,#display显示视频:
<video id="video" width="720" height="480"></video>
<canvas id="buffer" width="720" height="480"></canvas>
<canvas id="display" width="720" height="480"></canvas>
video.addEventListener("play", processFrame, false); //放在window.onload中
function processFrame(e) {
var video = document.getElementById("video");
if (video.paused || video.ended) {
return;
}
var bufferCanvas = document.getElementById("buffer");
var displayCanvas = document.getElementById("display");
var buffer = bufferCanvas.getContext("2d");
var display = displayCanvas.getContext("2d");
buffer.drawImage(video, 0, 0, bufferCanvas.width, displayCanvas.height);
//drawImage方法:取一图像并把它绘制在canvas上,指定x、y以及宽、高;
//若指定video为源,则可选取视频帧;
var frame = buffer.getImageData(0, 0, bufferCanvas.width, displayCanvas.height);
//getImageData方法:取图像的rgba四项信息生成数组;
var length = frame.data.length / 4;
//得出帧数据的长度,即一帧的像素数;
for (var i = 0; i < length; i++) {
var r = frame.data[i * 4 + 0];
var g = frame.data[i * 4 + 1];
var b = frame.data[i * 4 + 2];
if (effectFunction) {
effectFunction(i, r, g, b, frame.data); //传入要作处理的滤镜函数
}
}
display.putImageData(frame, 0, 0);
//处理完毕后,显示在canvas#display上;
setTimeout(processFrame, 0);
//要求再次尽快重复运行processFrame函数,使每一帧都能得到处理
}
function bwcartoon(pos, r, g, b, outputData) {
var offset = pos * 4;
if( outputData[offset] < 120 ) {
outputData[offset] = 80;
outputData[++offset] = 80;
outputData[++offset] = 80;
} else {
outputData[offset] = 255;
outputData[++offset] = 255;
outputData[++offset] = 255;
}
outputData[++offset] = 255;
++offset;
} //卡通滤镜
function noir(pos, r, g, b, data) {
var brightness = (3*r + 4*g + b) >>> 3;
if (brightness < 0) brightness = 0;
data[pos * 4 + 0] = brightness;
data[pos * 4 + 1] = brightness;
data[pos * 4 + 2] = brightness;
} //黑白滤镜
function western(pos, r, g, b, data) {
var brightness = (3*r + 4*g + b) >>> 3;
data[pos * 4 + 0] = brightness+40;
data[pos * 4 + 1] = brightness+20;
data[pos * 4 + 2] = brightness-20;
data[pos * 4 + 3] = 255; //220;
} //西部片滤镜
function scifi(pos, r, g, b, data) {
var offset = pos * 4;
data[offset] = Math.round(255 - r) ;
data[offset+1] = Math.round(255 - g) ;
data[offset+2] = Math.round(255 - b) ;
} //底片滤镜
1 = MEDIA_ERR_ABORTED:取回过程被用户中止;
2 = MEDIA_ERR_NETWORK:当下载时发生错误;
3 = MEDIA_ERR_DECODE:当解码时发生错误;
4 = MEDIA_ERR_SRC_NOT_SUPPORTED:不支持音频/视频。
与视频基本相同,改<video>
为<audio>
,无width
,height
以及poster
;
格式:mp3、wav、Ogg Vorbis。
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!--true值指谷歌地图将调用用户的位置,false表不调用位置-->
更多谷歌地图API:http://code.google.com/apis/maps/documentation/javascript/
geolocation
对象下的getCurrentPosition
、watchPosition
、clearWatch
方法:
getCurrentPosition(showLocation, errorHandler, positionOptions);
showLocation:position对象:coords属性、timestamp属性;
coordinates对象:latitude、longitude、accuracy、altitude、altitudeAccuracy、heading、speed
positionOption:enableHighAccuracy:true、false, //是否以高性能换取定位的精确性
timeout:infinity、数值(毫秒),//定位需要多长时间,超出这一期限则报为error
maximumAge:数值(毫秒)//最多可套用多久前的缓存位置
function degreesToDecimal(degrees, minutes, seconds){
return degrees + (minutes / 60) + (seconds / 3600.0);
}
var watchId = null;
var map = null;
var ourCoords = {
latitude: 47.624851,
longitude: -122.52099
};
var prevCoords = null;
window.onload = getMyLocation;
function getMyLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
displayLocation,
displayError,
{enableHighAccuracy: true, timeout:9000});
var watchButton = document.getElementById("watch");
watchButton.onclick = watchLocation;
var clearWatchButton = document.getElementById("clearWatch");
clearWatchButton.onclick = clearWatch;
}
else {
alert("Oops, no geolocation support");
}
//测试能否实现地理定位
}
function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
//实现地理定位的代码
var div = document.getElementById("location");
div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy)";
//引用地理定位
var km = computeDistance(position.coords, ourCoords);
var distance = document.getElementById("distance");
distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
//引用距离测量
if (map == null) {
showMap(position.coords);
prevCoords = position.coords;
}
else {
var meters = computeDistance(position.coords, prevCoords) * 1000;
if (meters > 20) {
scrollMapToPosition(position.coords);
prevCoords = position.coords;
}
}
}
function computeDistance(startCoords, destCoords) {
var startLatRads = degreesToRadians(startCoords.latitude);
var startLongRads = degreesToRadians(startCoords.longitude);
var destLatRads = degreesToRadians(destCoords.latitude);
var destLongRads = degreesToRadians(destCoords.longitude);
var Radius = 6371; // radius of the Earth in km
var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
Math.cos(startLatRads) * Math.cos(destLatRads) *
Math.cos(startLongRads - destLongRads)) * Radius;
return distance;
}
function degreesToRadians(degrees) {
radians = (degrees * Math.PI)/180;
return radians;
}
//实现距离测量的代码
function showMap(coords) {
var googleLatAndLong = new google.maps.LatLng(coords.latitude,
coords.longitude);
var mapOptions = {
zoom: 10,
center: googleLatAndLong,
mapTypeId: google.maps.MapTypeId.ROADMAP//SATELLITE:卫星图;HYBRID:混合
};
var mapDiv = document.getElementById("map");
map = new google.maps.Map(mapDiv, mapOptions);
var title = "Your Location";
var content = "You are here: " + coords.latitude + ", " + coords.longitude;
addMarker(map, googleLatAndLong, title, content);
// 标记弹窗信息
}
//引用谷歌地图
function addMarker(map, latlong, title, content) {
var markerOptions = {
position: latlong,
map: map,
title: title,
clickable: true
};
var marker = new google.maps.Marker(markerOptions);
var infoWindowOptions = {
content: content,
position: latlong
};
var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map);
});
}
//大头钉标记以及单击弹出窗口的代码
function displayError(error) {
var errorTypes = {
0: "Unknown error",
1: "Permission denied",
2: "Position is not available",
3: "Request timeout"
};
var errorMessage = errorTypes[error.code];
if (error.code == 0 || error.code == 2) {
errorMessage = errorMessage + " " + error.message;
}
var div = document.getElementById("location");
div.innerHTML = errorMessage;
}
//处理错误类型的代码
function watchLocation() {
watchId = navigator.geolocation.watchPosition(
displayLocation,
displayError,
{enableHighAccuracy: true, timeout:3000});
}
// 开始监视的代码
function scrollMapToPosition(coords) {
var latitude = coords.latitude;
var longitude = coords.longitude;
var latlong = new google.maps.LatLng(latitude, longitude);
map.panTo(latlong);
// 新标记
addMarker(map, latlong, "Your new location", "You moved to: " +
latitude + ", " + longitude);
}
// 路径标记的代码
function clearWatch() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
watchId = null;
}
}
// 清除监视的代码
<canvas width="600" height="200" id="">
<p>You need canvas to use XXX!</p>
<p>This example requires a browser that supports the
<a href="http://www.w3.org/html/wg/html5/">HTML5</a>
<canvas> feature.</p>
<!--此处文字在不支持canvas的浏览器将显示-->
</canvas>
window.onload = function() {
var button = document.getElementById("previewButton");
button.onclick = previewHandler;
makeImage();
}
function previewHandler() {
var canvas = document.getElementById("tshirtCanvas");//按id选取canvas
var context = canvas.getContext("2d");//2d的context指定,3d尚未出现
fillBackgroundColor(canvas, context);
var selectObj = document.getElementById("shape");
var index = selectObj.selectedIndex;
//selectedIndex表选取数组字符串对应的序数,注意第一个为0
var shape = selectObj[index].value;
//value表按上述序数取字符串
if (shape == "squares") {
for (var squares = 0; squares < 20; squares++) {
drawSquare(canvas, context);//编写随机生成的伪函数
}
}
else if (shape == "circles") {
for (var circles = 0; circles < 20; circles++) {
drawCircle(canvas, context);
}
}
drawText(canvas, context);
drawBird(canvas, context);
}
function fillBackgroundColor(canvas, context) {
var selectObj = document.getElementById("backgroundColor");
var index = selectObj.selectedIndex;
var bgColor = selectObj[index].value;
context.fillStyle = bgColor;
context.fillRect(0, 0, canvas.width, canvas.height);
//fillRect表画矩形带填充色,默认为黑色,语法:fillRect(x,y,width,height);
//strokeRect则表画矩形仅轮廓
}
function drawSquare(canvas, context) {
var w = Math.floor(Math.random() * 40);
//random取随机,floor取整,40界定上界
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.fillStyle = "rgb(0, 173, 239)";
//fillStyle表填充色:context.fillStyle = "lightblue";
context.fillRect(x, y, w, w);
}
function drawCircle(canvas, context) {
var radius = Math.floor(Math.random() * 40);
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.beginPath();
/*
路径方法(画三角形为例):
context.beginPath();
context.moveTo(_,_);
context.lineTo(_,_);
context.lineTo(_,_);
context.closePath();
context.lineWidth=5; 路径线宽为5
context.stroke(); 用线描绘路径
context.fillStyle="red";填充颜色为红
context.fill(); 用颜色填充路径封闭区域
*/
context.arc(x, y, radius, 0, degreesToRadians(360), true);
//arc方法:context.arc(x, y, radius, startAngle, endAngle, direction);
//x,y确定圆心坐标;radius指定半径;
//startAngle与endAngle表弧的起始角和终止角,单位弧度,取值正负,0为x轴正方向;
//direction规定创建圆路径的方向,true为逆时针;
context.fillStyle = "lightblue";
context.fill();
}
function degreesToRadians(degrees) {
return (degrees * Math.PI)/180;
//degreesToRadians()方法将角度转换为弧度;
}
function getSales() {
var url = ""; //浏览器从哪里请求数据
var request = new XMLHttpRequest(); //XMLHttpRequest是一个构造函数
request.open("GET", url); //HTTP GET是获取HTTP数据的标准方法,open方法建立请求
request.onload = function() {
if (request.status == 200) { //200表调用成功的返回值
updateSales(request.responseText);
}
};
request.send(null); //将请求发送至服务器,null指不发送数据
}
XMLHttpRequest
:给一个url,即可为用户获取数据,并置入处理程序。可以获取XML,也可是JSON。JSON.stringify()
方法:把js对象作为实参传入,成为一个字符串; JSON.parse()
方法:把字符串转换为一个对象;XMLHttpRequest
不允许跨域请求,这是浏览器的安全策略;若需跨域请求,需用JSONP (JSON with Padding),前提是被请求的服务器支持JSON,如Google、Facebook、Twitter、MS等。“web应用的一大优点就是不必像web页面那样不断刷新。”
setInterval()
方法:定时调用、处理的方法。setInterval(函数名, 毫秒数值)
。关闭浏览器终止计时,或以clearInterval
方法终止。createElement
方法、setAttribute
方法、getElementsByTagName
方法(获取后用数组取值[]取标签的次序)、appendChild
方法、replaceChild
方法(replaceChild (NEW, OLD);
)
window.onload = init;
function init() {
var interval = setInterval(handleRefresh, 3000);
handleRefresh();
}
function handleRefresh() {
console.log("here");
var url = "http://gumball.wickedlysmart.com" +
"?callback=updateSales" +
//"&lastreporttime=" + lastReportTime +
"&random=" + (new Date()).getTime(); //创建新的url骗过浏览器,旨在清除缓存
var newScriptElement = document.createElement("script"); //以下皆为创建新的script过程
newScriptElement.setAttribute("src", url);
newScriptElement.setAttribute("id", "jsonp");
var oldScriptElement = document.getElementById("jsonp");
var head = document.getElementsByTagName("head")[0];
if (oldScriptElement == null) {
head.appendChild(newScriptElement);
}
else {
head.replaceChild(newScriptElement, oldScriptElement);
}
}
XMLHttpRequest
和localStorage
;postMessage
可以向工作线程发送字符串、数组和对象,但不能发送函数;onmessage
属性设置为一个处理函数,来接收页面发送的消息;data
属性中;event.target
可以查找哪个工作线程发出了消息;worker.terminate()
终止一个线程,也可在工作线程中用close()
自己终止;importScripts
可以在线程中使用JS库,也可以利用JSONP;
window.onload = function() {
if (Worker == "undefined") {
document.getElementById("output").innerHTML = "Bummer, no Web Workers";
//查看是否支持web工作线程
}
else {
var worker = new Worker("worker.js");
//创建工作线程,可以有多个且不同的js:
/*
var worker = new Worker("worker.js");
var worker2 = new Worker("worker.js");
var worker3 = new Worker("another_worker.js");
*/
worker.postMessage("ping");
//postMessage方法可以发送字符串、数组、JSON对象等,但不能发送函数
worker.onmessage = function(event) {
var message = "Worker " + " says " + event.data;
document.getElementById("output").innerHTML = message;
}
//onmessage:接收到的消息包装与event对象中,含两个属性:data及target
worker.onerror = function(error) {
document.getElementById("output").innerHTML =
"There was an error in " + error.filename +
" at line number " + error.lineno +
": " + error.message;
};
}
}
localStorage.setItem(key)
可以增加一个值;localStorage.getItem(key)
可以获取一个值;localStorage.key()
方法可以列出localStorage中的键;removeItem(key)
及clear
;getTime()
方法,以时间生成唯一的键;
localStorage.setItem("sticky_0", "Pick up dry cleaning");
//localStorage对象:
//setItem方法:setItem("键的自定义字符串","值的自定义字符串"),键及值都需采用字符串形式
//字符串可用parseInt或parseOut转换为数值
/*
另可用关联数组语法:
localStorage["sticky_0"]="Pick up dry cleaning";
var sticky=lovalStorage["sticky_0"];
*/
localStorage.setItem("sticky_1", "Cancel cable tv, who needs it now?");
var stickyValue = localStorage.getItem("sticky_0");
alert(stickyValue);
window.onload = init;
function init() {
var button = document.getElementById("add_button");
button.onclick = createSticky;
for (var i = 0; i < localStorage.length; i++) {
//length属性给出localStorage的键值对的数目;
var key = localStorage.key(i);
//key方法可以给出localStorage中各项的键;
//语法:localStorage.key(i)取值;localStorage[key]返回;
if (key.substring(0, 6) == "sticky") {
var value = localStorage.getItem(key);
addStickyToDOM(value);
}
}
}
function createSticky() {
var value = document.getElementById("note_text").value;
var key = "sticky_" + localStorage.length;
//数组起始序数为0,可以length递增1;
localStorage.setItem(key, value);
addStickyToDOM(value);
}
function addStickyToDOM(value) {
var stickies = document.getElementById("stickies");
var sticky = document.createElement("li");
var span = document.createElement("span");
span.setAttribute("class", "sticky");
span.innerHTML = value;
sticky.appendChild(span);
stickies.appendChild(sticky);
}