User:Cleonis/sandbox/setInterval: Difference between revisions
From JSXGraph Wiki
(Created page with "<jsxgraph width="500" height="500"> var board = JXG.JSXGraph.initBoard( 'jxgbox', {boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true} ); var isPlaying = fals...") |
No edit summary |
||
Line 9: | Line 9: | ||
var starttime = 0; | var starttime = 0; | ||
var timeElapsed = 0; | var timeElapsed = 0; | ||
var | var interval; | ||
var p = board.create( | var p = board.create( | ||
Line 54: | Line 54: | ||
var starttime = 0; | var starttime = 0; | ||
var timeElapsed = 0; | var timeElapsed = 0; | ||
var | var interval; | ||
var p = board.create( | var p = board.create( |
Latest revision as of 19:25, 30 August 2014
The JavaScript code
var board = JXG.JSXGraph.initBoard(
'jxgbox',
{boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true}
);
var isPlaying = false;
var starttime = 0;
var timeElapsed = 0;
var interval;
var p = board.create(
'point',
[function() {return Math.cos(timeElapsed)}, function() {return Math.sin(timeElapsed)}]
);
function playing() {
timeElapsed = (Date.now() - starttime)/1000;
board.update();
}
function play() {
if (!isPlaying) {
starttime = Date.now();
isPlaying = true;
interval = setInterval(playing,50);
}
}
function resetAnimation() {
clearInterval(interval);
timeElapsed = 0;
isPlaying = false;
board.update();
}
The HTML
<button id="playbutton" onclick="play()">play</button><button id="resetanimation" onclick="resetAnimation()">reset</button>