https://jsxgraph.org/wiki/index.php?title=User:Cleonis/sandbox/setInterval&feed=atom&action=history
User:Cleonis/sandbox/setInterval - Revision history
2024-03-29T08:56:02Z
Revision history for this page on the wiki
MediaWiki 1.40.1
https://jsxgraph.org/wiki/index.php?title=User:Cleonis/sandbox/setInterval&diff=6293&oldid=prev
Cleonis at 19:25, 30 August 2014
2014-08-30T19:25:56Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 19:25, 30 August 2014</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l9">Line 9:</td>
<td colspan="2" class="diff-lineno">Line 9:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var starttime = 0;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var starttime = 0;</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var timeElapsed = 0;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var timeElapsed = 0;</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>var <del style="font-weight: bold; text-decoration: none;">requestId = 0</del>;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>var <ins style="font-weight: bold; text-decoration: none;">interval</ins>;</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var p = board.create(</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var p = board.create(</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l54">Line 54:</td>
<td colspan="2" class="diff-lineno">Line 54:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var starttime = 0;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var starttime = 0;</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var timeElapsed = 0;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var timeElapsed = 0;</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>var <del style="font-weight: bold; text-decoration: none;">requestId = 0</del>;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>var <ins style="font-weight: bold; text-decoration: none;">interval</ins>;</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var p = board.create(</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var p = board.create(</div></td></tr>
</table>
Cleonis
https://jsxgraph.org/wiki/index.php?title=User:Cleonis/sandbox/setInterval&diff=6292&oldid=prev
Cleonis: 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..."
2014-08-30T19:23:22Z
<p>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..."</p>
<p><b>New page</b></p><div><jsxgraph width="500" height="500"><br />
<br />
var board = JXG.JSXGraph.initBoard(<br />
'jxgbox',<br />
{boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true}<br />
);<br />
<br />
var isPlaying = false;<br />
var starttime = 0;<br />
var timeElapsed = 0;<br />
var requestId = 0;<br />
<br />
var p = board.create(<br />
'point',<br />
[function() {return Math.cos(timeElapsed)}, function() {return Math.sin(timeElapsed)}]<br />
);<br />
<br />
function playing() {<br />
timeElapsed = (Date.now() - starttime)/1000;<br />
board.update();<br />
}<br />
<br />
function play() {<br />
if (!isPlaying) {<br />
starttime = Date.now();<br />
isPlaying = true;<br />
interval = setInterval(playing,50);<br />
}<br />
}<br />
<br />
function resetAnimation() {<br />
clearInterval(interval);<br />
timeElapsed = 0;<br />
isPlaying = false;<br />
board.update();<br />
}<br />
</jsxgraph><br />
<br />
<html><br />
<br><br />
&nbsp;&nbsp;<button id="playbutton" onclick="play()">play</button>&nbsp;&nbsp;<button id="resetanimation" onclick="resetAnimation()">reset</button><br />
</html><br />
<br />
<br />
===The JavaScript code===<br />
<source lang="javascript"><br />
<br />
var board = JXG.JSXGraph.initBoard(<br />
'jxgbox',<br />
{boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true}<br />
);<br />
<br />
var isPlaying = false;<br />
var starttime = 0;<br />
var timeElapsed = 0;<br />
var requestId = 0;<br />
<br />
var p = board.create(<br />
'point',<br />
[function() {return Math.cos(timeElapsed)}, function() {return Math.sin(timeElapsed)}]<br />
);<br />
<br />
function playing() {<br />
timeElapsed = (Date.now() - starttime)/1000;<br />
board.update();<br />
}<br />
<br />
function play() {<br />
if (!isPlaying) {<br />
starttime = Date.now();<br />
isPlaying = true;<br />
interval = setInterval(playing,50);<br />
}<br />
}<br />
<br />
function resetAnimation() {<br />
clearInterval(interval);<br />
timeElapsed = 0;<br />
isPlaying = false;<br />
board.update();<br />
}<br />
</source><br />
<br />
===The HTML===<br />
<source><br />
<button id="playbutton" onclick="play()">play</button><button id="resetanimation" onclick="resetAnimation()">reset</button><br />
</source><br />
<br />
<br />
<br />
<br />
[[Category:Examples]]</div>
Cleonis