Cleonis at 19:25, 30 August 2014

2014-08-30T19:25:56Z

← Older revision		Revision as of 19:25, 30 August 2014
Line 9:		Line 9:
	var starttime = 0;		var starttime = 0;
	var timeElapsed = 0;		var timeElapsed = 0;
	var ~~requestId = 0~~;		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 ~~requestId = 0~~;		var interval;

	var p = board.create(		var p = board.create(

Cleonis: Created page with " var board = JXG.JSXGraph.initBoard( 'jxgbox', {boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true} ); var isPlaying = fals..."

2014-08-30T19:23:22Z

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..."

New page

<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 = false;
var starttime = 0;
var timeElapsed = 0;
var requestId = 0;

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();
}
</jsxgraph>

<html>
<br>
  <button id="playbutton" onclick="play()">play</button>  <button id="resetanimation" onclick="resetAnimation()">reset</button>
</html>

===The JavaScript code===
<source lang="javascript">

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 requestId = 0;

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();
}
</source>

===The HTML===
<source>
<button id="playbutton" onclick="play()">play</button><button id="resetanimation" onclick="resetAnimation()">reset</button>
</source>

[[Category:Examples]]

User:Cleonis/sandbox/setInterval - Revision history

Cleonis at 19:25, 30 August 2014

Cleonis: Created page with " var board = JXG.JSXGraph.initBoard( 'jxgbox', {boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true} ); var isPlaying = fals..."