Mirror
/
html5demos
mirror of https://github.com/Erreur32/html5demos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'joelrbrandt-new-web-worker-demo'

This commit is contained in:
Remy Sharp 2013-01-07 23:17:47 +00:00
parent 61fe0b95f6 f07a64c928
commit 4e0d1f7050
2 changed files with 45 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
demos/worker.html
View File

@ -1,38 +1,39 @@
<html> <title>Web Worker</title>
<head> <style>
<title>Worker</title> body {
<style> font-family: sans-serif;
body { }
font-family: sans-serif;
} #status {
height: 200px;
#status { max-height: 200px;
height: 200px; border: thin solid #aaa;
max-height: 200px; overflow-y: scroll;
border: thin solid black; }
overflow-y: scroll;
} #animationWrapper {
position: relative;
#square { height: 50px;
position: absolute; }
left: 0px;
top: 0px; #square {
width: 75px; position: absolute;
height: 75px; left: 0px;
background-color: rgba(0, 0, 220, 0.3); top: 0px;
z-index: -1; width: 50px;
} height: 50px;
</style> background-color: rgba(0, 0, 220, 0.3);
</head> }
<body> </style>
<h1>Web Worker Demo</h1> <article>
<p>Works in Chrome, Safari, and Firefox. Web worker portion works in Opera.</p> <p>This demo shows how main window animation isn't interrupted by Web Workers. <small>Note that the animation does not work in Opera (due to lack of requestAnimationFrame support).</small></p>
<p>Use arrow keys to change the direction of the animated square. The square is animated with <em>requestAnimationFrame</em>.</p> <p>Use arrow keys to change the direction of the animated square. The square is animated with <em>requestAnimationFrame</em>.</p>
<p>Click the button below to start or stop the worker.</p> <div id="animationWrapper">
<div><input type="button" value="start worker" id="toggleWorker" /></div> <div id="square"></div>
<h2>Messages from Worker:</h2> </div>
<div id="status"></div> <p>Click the button below to start or stop the worker.</p>
<div id="square"></div> <div><input type="button" value="start worker" id="toggleWorker" /></div>
<script src="../js/worker-main.js"></script> <h2>Messages from Worker:</h2>
</body> <div id="status"></div>
</html> <script src="/js/worker-main.js"></script>
</article>

12
js/worker-main.js
View File

@ -4,7 +4,7 @@
(function () { (function () {
"use strict"; "use strict";
var SQUARE_SIZE = 75; var SQUARE_SIZE = 50;
var MOVEMENT_STEP = 3; var MOVEMENT_STEP = 3;
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
@ -52,26 +52,26 @@
var top = parseInt(square.style.top, 10); var top = parseInt(square.style.top, 10);
var right = left + SQUARE_SIZE; var right = left + SQUARE_SIZE;
var bottom = top + SQUARE_SIZE; var bottom = top + SQUARE_SIZE;
switch (direction) { switch (direction) {
case 37: // left case 37: // left
if (left > 0) { if (left > 0) {
square.style.left = left - MOVEMENT_STEP; square.style.left = left - MOVEMENT_STEP + 'px';
} }
break; break;
case 38: // up case 38: // up
if (top > 0) { if (top > 0) {
square.style.top = top - MOVEMENT_STEP; square.style.top = top - MOVEMENT_STEP + 'px';
} }
break; break;
case 39: //right case 39: //right
if (right < document.documentElement.clientWidth) { if (right < document.documentElement.clientWidth) {
square.style.left = left + MOVEMENT_STEP; square.style.left = left + MOVEMENT_STEP + 'px';
} }
break; break;
case 40: // down case 40: // down
if (bottom < document.documentElement.clientHeight) { if (bottom < document.documentElement.clientHeight) {
square.style.top = top + MOVEMENT_STEP; square.style.top = top + MOVEMENT_STEP + 'px';
} }
break; break;
default: default: