再使用之前 請用 Chrome
本地儲存 – Web Storage
// use localStorage for persistent storage // use sessionStorage for per tab storage textarea.addEventListener('keyup', function () { window.localStorage['value'] = area.value; window.localStorage['timestamp'] = (new Date()).getTime(); }, false); textarea.value = window.localStorage['value'];
本地數據庫 – Web SQL Database
var db = window.openDatabase("Database Name", "Database Version"); db.transaction(function(tx) { tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback); });
文件緩存 – Application Cache API
<Html manifest="cache-manifest"> window.applicationCache.addEventListener('checking', updateCacheStatus, false);
CACHE MANIFEST
# version 1
CACHE:
/Html5/src/refresh.png
/Html5/src/logic.JS
/Html5/src/style.CSS
/Html5/src/background.png
讓程序在後台運行 – Web Workers
main.js: var worker = new Worker(‘extra_work.js'); worker.onmessage = function (event) { alert(event.data); }; extra_work.JS: // do some work; when done post message. postMessage(some_data);
雙向信息傳輸 – Web Sockets
var socket = new WebSocket(location); socket.onopen = function(event) { socket.postMessage(“Hello, WebSocket”); } socket.onmessage = function(event) { alert(event.data); } socket.onclose = function(event) { alert(“closed”); }
桌面提醒 – Notifications
if (window.webkitNotifications.checkPermission() == 0) { // you can pass any url as a parameter window.webkitNotifications.createNotification(tweet.picture, tweet.title, tweet.text).show(); } else { window.webkitNotifications.requestPermission(); }
拖放操作 – Drag and drop
document.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed = 'copy'; }, false);
Html 新的語義標簽
<body> <header> <hgroup> <h1>Page title</h1> <h2>Page subtitle</h2> </hgroup> </header> <nav> <ul> Navigation... </ul> </nav> <section> <article> <header> <h1>Title</h1> </header> <section> Content... </section> </article> <article> <header> <h1>Title</h1> </header> <section> Content... </section> </article> <article> <header> <h1>Title</h1> </header> <section> Content... </section> </article> </section> <aside> Top links... </aside> <footer> Copyright © 2009. </footer> </body>
新的鏈接關系
<link rel='alternate'> <link rel='icon'> <link rel='nofollow'> <link rel='prefetch'> <a rel='archives'> <a rel='external'> <a rel='license'> <a rel='noreferrer'> <a rel='pingback'> <a rel='sidebar'> <a rel='tag'>
新的表單元素類型
<input type='range' min='0' max='50' value='0'> <input autofocus type='search'> <input type='text' placeholder='Search inside'> <menu> <progress> <input type='color'> <input type='number'> <input type='email'> <input type='tel'> <input type='time'> <input type='date'> <input type='month'> <input type='week'> <input type='datetime'>
音頻 + 視頻 – Audio + Video
<audio src="sound.mp3" controls></audio> document.getElementByIdx_x("audio").muted=false; <video src='movIE.mp4' autoplay controls ></video> document.getElementByIdx_x("video").play();
圖形繪制 – Canvas
<canvas id="canvas" width="838" height="220"></canvas> <script> var canvasContext = document.getElementByIdx_x("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = 'round'; canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext.stroke(); </script>
CSS 顯示本地沒有的字體
@font-face { font-family: 'Junction'; src: url(Junction02.otf); } @font-face { font-family: 'LeagueGothic'; src: url(LeagueGothic.otf); } @font-face { font-family: 'GG250'; src: url(General250.otf); } header { font-family: 'LeagueGothic'; } .row:nth-child(even) { background: #dde; } .row:nth-child(odd) { background: white; } :not(.box) { color: #00c; } :not(span) { display: block; } h2:first-child { ... } div.text > div { ... } h2 + header { ... } input[type="text"] { background: #eee; } 分欄顯示 -webkit-column-count: 6; -webkit-column-rule: 1px solid #bbb; -webkit-column-gap: 2em; 文本描邊 -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 0.00px; 透明效果 color: rgba(255, 0, 0, 0.41); background: rgba(0, 0, 255, 0.19) HSL(色相/飽和度/亮度)色彩模式 color: hsla( 184, 75%, 33%, 0.15); 圓角效果 border-radius: 7px; background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(white), color-stop(0.5, white), color-stop(0.5, #66cc00)) background: -webkit-gradient(radial, 430 50, 0, 430 50, 590, from(red), to(#000)) text-shadow: rgba(0, 0, 0, 0.5) 0 -0px -0px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(200, 200, 240, 0.5)), to(rgba(255, 255, 255, 0.5))); border-radius: 50px; 制作一個LOGO，只需拖動滑動條 -webkit-box-reflect: below 10px -webkit-gradIEnt(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.78))); 變換 - Transitions #box { -webkit-transition: margin-left 1s ease-in-out; } @-webkit-keyframes pulse { from { opacity: 0.0; font-size: 100%; } to { opacity: 1.0; font-size: 200%; } } 動畫效果 div { -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; }