Multidesk.be » Forums » Webdevelopment & -scripting » [javascript] vertraagde div.innerhtml verandering

  • Pagina
  • 1 van 1
0 gasten lezen dit onderwerp.
^ Onderwerp geschreven door fawkes op donderdag 3 januari 2013 om 00:44:40.
fawkes' avatar
Multiviteit: 230
-
-
Ik ben bezig met een script die zelfstandig een puzzel oplost.

De functie die wordt gebruikt om een cel te vullen is deze:

CODE
  1. <script language="javascript">
  2. function ChangeValue(row,col,value) {
  3.         document.getElementById(row+"_"+col).innerHTML = value;
  4. }
  5. </script>


die wordt opgeroepen door deze code:

CODE
  1.  
  2. <script>
  3. ChangeValue(row,col,value);
  4. </script>
  5.  


Als ik nu op oplossen klik dan wordt het in een keer opgelost (een computer kan snel genoeg denken). Maar is er ook een manier om een seconde tussen iedere ingevulde cel te plaatsen?

Ik heb al geexperimenteerd met deze codes:
CODE
  1.  
  2. <script language="javascript">
  3. function ChangeValue(row,col,value) {
  4.         setTimeout(document.getElementById(row+"_"+col).innerHTML = value,1000);
  5. }
  6. </script>
  7.  

CODE
  1.  
  2. <script>
  3. setTimeout(function() { ChangeValue(row,col,value) } , 1000);
  4. </script>
  5.  
`

maar geen van beide keuzes lijkt te werken. Heeft een van jullie een idee?
-
^ Reactie #1 geschreven door thekid op donderdag 3 januari 2013 om 09:07:45.
thekid's avatar
Multiviteit: 5273
Moderator
CODE
  1. setTimeout('ChangeValue(' + row + ', ' + col + ',' + value + ');', 1000)
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #2 geschreven door fawkes op donderdag 3 januari 2013 om 12:43:44.
fawkes' avatar
Multiviteit: 230
-
-
om te testen heb ik dit nu staan:
CODE
  1.  
  2. <script>
  3. setTimeout('ChangeValue(2,3,1);', 1000);
  4. setTimeout('ChangeValue(3,3,1);', 1000);
  5. setTimeout('ChangeValue(4,3,1);', 1000);
  6. </script>
  7.  

maar er wordt nog niet gewacht.
Kan het komen door verkeerde browser ofzo?
-
^ Reactie #3 geschreven door thekid op donderdag 3 januari 2013 om 21:19:15.
thekid's avatar
Multiviteit: 5273
Moderator
Een timeout wacht niet totdat de code uitgevoerd is alvirens terug te keren ;)

Wat hier zou gebeuren is dus na 1 seconde alle 3 de stappen worden uitgevoerd.

Je moet dus de volgende stap van het oplossen pas opnieuw aanroepen nadat de eerste stap werd uitgevoerd.

Op mijn tablet is mijn keyboard wat beperkt, maar ga je morgen verder helpen met code indien nodig.

De setTimeout method is een asynchrone methode, dus wanneer je deze functie uitvoert keer je direft terug in de context en zal de aangeroepen functie pas na de opgegeven timeout uitgevoerd worden.

Je zal dus bvb een globale klasse of variabelen moeten gebruiken (of verder gaan op basis vqn de vorige variabelen)
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #4 geschreven door fawkes op donderdag 3 januari 2013 om 22:27:45.
fawkes' avatar
Multiviteit: 230
-
-
ik snap niet helemaal wat je nu bedoeld.
zou u aan de hand van wat voorbeeld codes wat toelichten?
-
^ Reactie #5 geschreven door thekid op vrijdag 4 januari 2013 om 17:37:58.
thekid's avatar
Multiviteit: 5273
Moderator
Ok :)

maar niet echt op letten, het oplosalgoritme werkt bijna nooit op grids groter dan 2x2 :D (tot nog toe 1 of 2 keer gelukt of zo)

toont wel vrij veel ('t zal misschien iets te ingewikkeld zijn). 'k zou zeggen sla het eens op in een apart html bestand en open het eens in een browser (getest hier op FF))

vragen staat vrij, en als jij uw probleem duidelijker stelt kan ik mijn antwoord ook duidelijker stellen :D
CODE
  1. <html>
  2. <head>
  3. <title>Javascript shuffle puzzle</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <style type="text/css">
  6. body, html {width: 100%; height: 100%; font-family: 'Arial'; font-size: 1em;}
  7. body
  8. {
  9.         margin: 0; padding: 0;
  10.         text-align: center;
  11.         font-family: 'Arial';
  12. }
  13. .cube
  14. {
  15.         background-color: #cfcfcf;
  16.         text-align: center;
  17.         vertical-align: middle;
  18.         font-size: 14px;
  19.         font-weight: bold;
  20.         font-family: 'Arial Black';
  21.         position: absolute;
  22.         cursor: pointer;
  23. }
  24. .cube span
  25. {
  26.         margin-left: auto;
  27.         margin-top: auto;
  28. }
  29. .hidden
  30. {
  31.         display: none;
  32.         visibility: hidden;
  33. }
  34. .gameboard
  35. {
  36.         margin-left: auto;
  37.         width: 800px;
  38.         height: 600px;
  39.         position: absolute;
  40.         background-color: #333333;
  41.         text-align: center;
  42.         vertical-align: top;
  43. }
  44. .playfield
  45. {
  46.         position: absolute;
  47.         left: 10px;
  48.         top: 32px;
  49.         right: 10px;
  50.         bottom: 32px;
  51.         background-color: #efefef;
  52. }
  53. .buttons
  54. {
  55.         position: absolute;
  56.         bottom: 2px;
  57.         background-color: #efefef;
  58.         padding: 3px;
  59.         left: 50%;
  60.         margin-left: -75px;
  61.         width: 150px;
  62. }
  63. .clock
  64. {
  65.         position: absolute;
  66.         background-color: #000000;
  67.         padding: 3px;
  68.         color: #ffffff;
  69.         font-weight: 600;
  70.         letter-spacing: 2px;
  71.         width: 100px;
  72.         text-align: center;
  73.         left: 50%;
  74.         margin-left: -50px;
  75. }
  76. .console
  77. {
  78.         position: absolute;
  79.         right: 0px;
  80.         bottom: 0px;
  81.         text-align: right;
  82.         background-color: #000000;
  83.         color: #ffffff;
  84.         padding: 3px;
  85. }
  86. </style>
  87. <script type="text/javascript">
  88. var game = (function(){
  89.     var game;
  90.     window.game = game;
  91.     game = {
  92.       _timer: { id: -1, stopRequested: false, secondsRunning: 0 }, // timer function for clock, uses setInterval to have an each second, points to game.tick();
  93.       _grid: [], // will contain game grid, created in game.newGrid(); will be modified in game.moveBlock();
  94.       _gridsizes: [2,3,4,5,6],
  95.       _curSize: 1,
  96.       init: function() {
  97.         // creates some stuff when the page loads
  98.                 var sel = document.getElementById('gridsizes');
  99.                 sel.selectedIndex = game._curSize;
  100.       },
  101.       newGrid: function() {
  102.         game.attempts = 0;
  103.         game.autosolve = [];
  104.         game.Solved = false;
  105.         var _grid = game._grid;
  106.         var playfield = document.getElementById('playfield');
  107.         if (_grid.length > 0) {
  108.           // remove previous cubes
  109.           playfield.innerHTML = '&nbsp;';
  110.         }
  111.         var rows = game._gridsizes[game._curSize];
  112.         var totalelements = rows * rows;
  113.         var blocksize = (parseInt(playfield.offsetWidth)) / rows;
  114.         var blocksizeheight = (parseInt(playfield.offsetHeight)) / rows;
  115.         for (var index = 0; index < totalelements; index++) {
  116.                     _grid[index] = { Value: index, IsHidden: false, Element: document.createElement('div'), Row: Math.floor(index / rows), Col: index % rows, SizeW: blocksize, SizeH: blocksizeheight }; 
  117.                     _grid[index].Element.className = 'cube';
  118.                     _grid[index].Element.setAttribute('onclick', 'javascript:game.moveBlock(' + index + ');');
  119.                     _grid[index].Element.innerHTML = '<span>' + (index + 1) + '</span>';
  120.                     playfield.appendChild(_grid[index].Element);
  121.           game.positionBlock(index);
  122.         }
  123.         // check which block to hide
  124.         var hidden = Math.floor(Math.random() * totalelements);
  125.         _grid[hidden].IsHidden = true;
  126.         _grid[hidden].Element.className = 'hidden';
  127.         // try to give a random position to the blocks
  128.         var shuffle = Math.floor(Math.random() * 50) + 50;
  129.         for (var x = 0; x < shuffle; x++) {
  130.           var row = _grid[hidden].Row,
  131.             col = _grid[hidden].Col;
  132.           var bts = Math.floor(Math.random() * 4);
  133.           switch (bts)
  134.           {
  135.             case 0: //
  136.               if (row > 0) {
  137.                 game.moveBlock(game.getIndex(row - 1, col), true);
  138.               }
  139.               break;
  140.             case 1:
  141.               if (row < rows - 1) {
  142.                 game.moveBlock(game.getIndex(row + 1, col), true);
  143.               }
  144.               break;
  145.             case 2:
  146.               if (col > 0) {
  147.                 game.moveBlock(game.getIndex(row, col - 1), true);
  148.               }
  149.               break;
  150.             case 3:
  151.               if (col < rows - 1) {
  152.                 game.moveBlock(game.getIndex(row, col + 1), true);
  153.               }
  154.               break;
  155.           }
  156.         }
  157.         // start game interval
  158.         game._timer.id = setInterval('game.tick();', 1000);
  159.         game.autosolve = [];
  160.       },
  161.       key: function() {
  162.         var ln = [];
  163.         for (var x = 0; x < game._grid.length; x++)
  164.           ln[x] = -1;
  165.         for (var x = 0; x < game._grid.length; x++)
  166.         {
  167.           ln[game._grid[x].Row * game._gridsizes[game._curSize] + game._grid[x].Col] = game._grid[x].Value;
  168.         }
  169.         var result = '';
  170.         for (var x = 0; x < ln.length; x++)
  171.         {
  172.           result += ln[x] + '';
  173.         }
  174.         return result;
  175.       },
  176.       check: function() {
  177.         var curkey = game.key();
  178.         //alert(curkey);
  179.         var eqkey = '';
  180.         for (var x = 0; x <game._grid.length; x++)
  181.           eqkey += x + '';
  182.         return curkey == eqkey;
  183.       },
  184.       positionBlock: function(index) {
  185.         var row = game._grid[index].Row,
  186.           col = game._grid[index].Col,
  187.           bsizew = game._grid[index].SizeW,
  188.           bsizeh = game._grid[index].SizeH;
  189.         game._grid[index].Element.style.left = (col * bsizew) + 'px';
  190.         game._grid[index].Element.style.top = (row * bsizeh) + 'px';
  191.         game._grid[index].Element.style.width = bsizew + 'px';
  192.         game._grid[index].Element.style.height = bsizeh + 'px';
  193.         game._grid[index].Element.style.position = 'absolute';
  194.       },
  195.       // moves the clicked block to the open space
  196.       isFree: function(row, col) {
  197.         for (var x = 0; x < game._grid.length; x++) {
  198.           if (game._grid[x].Row == row && game._grid[x].Col == col) {
  199.             return game._grid[x].IsHidden;
  200.           }
  201.         }
  202.         return false;
  203.       },
  204.       Solved: false,
  205.       moveBlock: function(index, auto) {
  206.         if (game._grid[index].IsHidden) {
  207.           alert('Please click on a block adjacent to this section.');
  208.           return;
  209.         }
  210.         if (!auto && game._timer.stopRequested | game._timer.id == -1) {
  211.           // game has already ended!
  212.           return;
  213.         }
  214.         var row = game._grid[index].Row,
  215.           col = game._grid[index].Col;
  216.        
  217.         if (row > 0 && game.isFree(row - 1, col)) {
  218.           // move block one up
  219.           game.swap(index, row - 1, col, auto);
  220.                     return;
  221.               }
  222.               if (row < game._gridsizes[game._curSize] && game.isFree(row + 1, col)) {
  223.                     // move block one down
  224.           game.swap(index, row + 1, col, auto);
  225.                     return;
  226.               }
  227.               if (col > 0 && game.isFree(row, col - 1)) {
  228.                     // move block to the left
  229.           game.swap(index, row, col - 1, auto);
  230.                     return;
  231.               }
  232.               if (col < game._gridsizes[game._curSize] && game.isFree(row, col + 1)) {
  233.                     // move block to the right
  234.           game.swap(index, row, col + 1, auto);
  235.                     return;
  236.               }
  237.               // user clicked on a blocked block
  238.               alert('this block cannot be moved');
  239.       },
  240.       swap: function(index, toRow, toCol, auto) {
  241.         var otherIndex = -1;
  242.         for (var x = 0; x < game._grid.length; x++) {
  243.           if (game._grid[x].Row == toRow && game._grid[x].Col == toCol) {
  244.             otherIndex = x;
  245.             break;
  246.           }
  247.         }
  248.         if (otherIndex >= 0 && index >= 0) {
  249.           var ox = game._grid[index].Col,
  250.             oy = game._grid[index].Row;
  251.           game._grid[index].Col = game._grid[otherIndex].Col;
  252.           game._grid[index].Row = game._grid[otherIndex].Row;
  253.           game._grid[otherIndex].Col = ox;
  254.           game._grid[otherIndex].Row = oy;
  255.           game.positionBlock(otherIndex);
  256.           game.positionBlock(index);
  257.           if (!auto && game.check()) {
  258.                             game._timer.stopRequested = true;
  259.             alert('Congratulations, you have won the game!\r\nGame solved in: ' + game.rationalTime());
  260.             // potential highscore handling can be done here
  261.             game.Solved = true;
  262.             return;
  263.           }
  264.         }
  265.       },
  266.       // moves the blocks till the puzzle is solved
  267.       getIndex: function(row, col) {
  268.         for (var x = 0; x < game._grid.length; x++) {
  269.           if (game._grid[x].Row == row && game._grid[x].Col == col)
  270.             return x;
  271.         }
  272.         return -1;
  273.       },
  274.       autosolve: [],
  275.       solveGrid: function() {
  276.         game._timer.stopRequested = true;
  277.         // do solving
  278.         var free = [];
  279.         var rows = game._gridsizes[game._curSize];
  280.         for (var row = 0; row < rows; row++) {
  281.           for (var col = 0; col < rows; col++) {
  282.             if (row > 0 && game.isFree(row - 1, col)) {
  283.               var i = free.length;
  284.               free[i] = { index: game.getIndex(row, col), newrow: row - 1, newcol: col };
  285.             }
  286.             if (row < rows && game.isFree(row + 1, col)) {
  287.               var i = free.length;
  288.               free[i] = { index: game.getIndex(row, col), newrow: row + 1, newcol: col };
  289.             }
  290.             if (col > 0 && game.isFree(row, col - 1)) {
  291.               var i = free.length;
  292.               free[i] = { index: game.getIndex(row, col), newrow: row, newcol: col - 1 };
  293.             }
  294.             if (col < rows && game.isFree(row, col + 1)) {
  295.               var i = free.length;
  296.               free[i] = { index: game.getIndex(row, col), newrow: row, newcol: col + 1 };
  297.             }
  298.           }
  299.         }
  300.         var indextoswap = -1;
  301.         for (var x = 0; x < free.length; x++) {
  302.           var pv = game.previewSwapkey(free[x]);
  303.           // check if this key does not exist yet
  304.           var used = false;
  305.           for (var keys = 0; keys < game.autosolve.length; keys++) {
  306.             if (game.autosolve[keys] == pv) {
  307.               used = true;
  308.               break;
  309.             }
  310.           }
  311.           if (!used) {
  312.             //alert('next possible combination is ' + pv + ' index (' + x + ')');
  313.             var i = game.autosolve.length;
  314.             game.autosolve[i] = pv; // add key
  315.             indextoswap = x;
  316.             break;
  317.           }
  318.         }
  319.         if (indextoswap >= 0) {
  320.           game.swap(free[indextoswap].index, free[indextoswap].newrow, free[indextoswap].newcol);
  321.           if (!game.Solved)
  322.             setTimeout('game.solveGrid();', 25); // do next try
  323.           else
  324.             alert('Auto solved the puzzle!')
  325.         }
  326.         else
  327.         {
  328.           if (game.attempts < game._grid.length) {
  329.             game.autosolve = []; // first iteration
  330.             //alert('Trying new iteration');
  331.                           setTimeout('game.solveGrid();', 25); // do next try
  332.                           game.attempts++;
  333.                     }
  334.                     else
  335.             alert('There are no more options to explore! Autosolving failed!');
  336.         }
  337.         game.setText('console', 'tried ' + game.autosolve.length + ' combinations so far (#' + game.attempts + ')');
  338.       },
  339.       attempts: 0,
  340.       previewSwapkey: function(opt) {
  341.         var rows = game._gridsizes[game._curSize];
  342.         var cp = [];
  343.         var ln = [];
  344.         // do shallow copy
  345.         for (var x = 0; x < game._grid.length; x++) {
  346.           cp[x] = { Value: game._grid[x].Value, Row: game._grid[x].Row, Col: game._grid[x].Col };
  347.           ln[x] = -1;
  348.         }
  349.         for (var x = 0; x < cp.length; x++) {
  350.           if (cp[x].Row == opt.newrow && cp[x].Col == opt.newcol) {
  351.             var or = cp[x].Row,
  352.               oc = cp[x].Col;
  353.             cp[x].Row = cp[opt.index].Row;
  354.             cp[x].Col = cp[opt.index].Col;
  355.             cp[opt.index].Row = or;
  356.             cp[opt.index].Col = oc;
  357.             break;
  358.           }
  359.         }
  360.         for (var x = 0; x < cp.length; x++) {
  361.           var index = cp[x].Row * rows + cp[x].Col;
  362.           ln[index] = cp[x].Value;
  363.         }
  364.         var key = '';
  365.         for (var x = 0; x < ln.length; x++)
  366.           key += ln[x] + '';
  367.         return key;
  368.       },
  369.       tick: function() {
  370.                 if (game._timer) {
  371.                         if (game._timer.stopRequested) {
  372.                         clearInterval(game._timer.id);
  373.                         game._timer = { id: -1, stopRequested: false, secondsRunning: 0 }; // reset timer
  374.                         }
  375.                         else {
  376.                     game._timer.secondsRunning++;
  377.                       }
  378.                       game.updateTime();
  379.                 }
  380.       },
  381.       setText: function(id, txt) {
  382.         var el = document.getElementById(id);
  383.         if (el) {
  384.           el.innerHTML = txt;
  385.         }
  386.       },
  387.       rationalTime: function() {
  388.         var seconds = game._timer.secondsRunning % 60;
  389.         var minutes = Math.floor(game._timer.secondsRunning / 60.0) % 60;
  390.         var hours = Math.floor(game._timer.secondsRunning / 60.0 / 60.0);
  391.         return hours + ':' + minutes + ':' + seconds;
  392.       },
  393.       updateTime: function() {
  394.         game.setText('clock', game.rationalTime());
  395.       },
  396.       selectedSize: function(index) {
  397.         game._curSize = index;
  398.       }
  399.     };
  400.     return game;
  401.   })();
  402. </script>
  403. </head>
  404. <body>
  405. <div id="gameboard" class="gameboard">
  406.   <div id="clock" class="clock">
  407.         0:0:0
  408.   </div>
  409.   <div id="playfield" class="playfield">
  410.        
  411.   </div>
  412.   <div id="buttons" class="buttons">
  413.         <select size="1" id="gridsizes" onchange="game.selectedSize(this.selectedIndex);">
  414.               <option value="2">2x2</option>
  415.               <option value="3" selected="selected">3x3</option>
  416.               <option value="4">4x4</option>
  417.               <option value="5">5x5</option>
  418.               <option value="6">6x6</option>
  419.         </select>
  420.     <input class="button" type="button" id="btnNew" value="new" onclick="javascript:game.newGrid();" />
  421.     <input class="button" type="button" id="btnSolve" value="solve" onclick="javascript:game.solveGrid();" />
  422.   </div>
  423.   <div id="console" class="console">
  424.         &nbsp;
  425.   </div>
  426. </div>
  427. <script type="text/javascript">
  428. game.init();
  429. </script>
  430. </body>
  431. </html>



Bijlage: 20583ba92c52784af8c605b86dfb831b.html

misschien nog een tiop, als ide voor javascript gebruik ik nog graag aptana studio 3 :) free opensource, ook als plugin voor eclipse te gebruiken, vereist java jre.

http://www.aptana.com/
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #6 geschreven door thekid op zaterdag 5 januari 2013 om 11:37:02.
thekid's avatar
Multiviteit: 5273
Moderator
fawkes, was het goed zo, of iets te ingewikkeld :)

ik kan je ook eens simpelere versie doorgeven over hoe werken een timeout/interval en oplopende waardes :)

Werken met intervals & globale variable

ik heb ieder lijntje becommentarieert, toont een eenvoudige werken van
interval_id = setInterval(func, timeout);
clearInterval(interval_id);

CODE
  1. <html>
  2. <head>
  3. <title>Javascript timer examples</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  5. <style type="text/css">
  6. * { font-family: 'Arial'; }
  7. body, html { padding: 0; margin: 0; width: 100%; height: 100%; background-color: #ffffff; color: #000000; }
  8. a { color: #2555aa; text-decoration: none; }
  9. a:hover { text-decoration: underline; }
  10. .panel { float: left; margin: 10px; border: solid #a0a0a0 1px; vertical-align: top; text-align: left; padding: 10px; border-radius: 10px; }
  11. .panel h1 { line-height: normal; font-size: 15px; font-weight: bold; border-bottom: solid #a0a0a0 1px; padding: 3px; }
  12. </style>
  13. <script type="text/javascript">
  14. var counters = [];      // will hold all created timers (just to keep them ticking)
  15. function createNewTimer() {
  16.   var i = counters.length; // get length of counters array
  17.   counters[i] = { Seconds: 0, ID: -1 }; // create object with properties Seconds & ID to maintain timer (and to be able to stop him later as well)
  18.   var dv = document.createElement('div'); // create a new div element
  19.   dv.setAttribute('id', 'timer-' + i); // set the id so we can get it back later
  20.   dv.innerHTML = '<span id="timer-' +i + '-value">0</span><input type="button" value="stop timer" onclick="javascript:stopTimer(' + i + ');" />'; // create a label & button to stop this timer
  21.   var tmr = document.getElementById('timers'); // get timers div
  22.   tmr.appendChild(dv); // add div as timer element
  23.   counters[i].ID = setInterval('tick(' + i + ');', 1000); // start a new timer interval, give current index as parameter
  24. }
  25.  
  26. function tick(index) { // gets called every second without extra calling
  27.   if (index < counters.length) { // does counter exist
  28.     counters[index].Seconds++; // increase seconds
  29.     var label = document.getElementById('timer-' + index + '-value'); // get span with value of timer
  30.     label.innerHTML = counters[index].Seconds; // update label
  31.   }
  32. }
  33.  
  34. function stopTimer(index) {
  35.   if (index < counters.length) { // does counter exist
  36.     clearInterval(counters[index].ID); // stop interval loop
  37.     var el = document.getElementById('timer-' + index); // get div container timer elements
  38.     var tmr = document.getElementById('timers'); // get timers div
  39.     tmr.removeChild(el); // remove timer div from timers sheet
  40.   }
  41. }
  42. </script>
  43. </head>
  44. <body>
  45. <div id="timers" class="panel">
  46. <h1>Timers</h1>
  47. </div>
  48. <div id="commands" class="panel">
  49. <h1>Commands</h1>
  50. <input type="button" value="Start new timer" onclick="javascript:createNewTimer();" />
  51. </div>
  52. </body>
  53. </html>


Exact hetzelfde, maar met setTimeout
Opnieuw, alles heeft commentaar :)

nu werk ik echter met de setTimeout methode (die steeds opnieuw moet worden gecalled)
CODE
  1. <html>
  2. <head>
  3. <title>Javascript timer examples</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  5. <style type="text/css">
  6. * { font-family: 'Arial'; }
  7. body, html { padding: 0; margin: 0; width: 100%; height: 100%; background-color: #ffffff; color: #000000; }
  8. a { color: #2555aa; text-decoration: none; }
  9. a:hover { text-decoration: underline; }
  10. .panel { float: left; margin: 10px; border: solid #a0a0a0 1px; vertical-align: top; text-align: left; padding: 10px; border-radius: 10px; }
  11. .panel h1 { line-height: normal; font-size: 15px; font-weight: bold; border-bottom: solid #a0a0a0 1px; padding: 3px; }
  12. </style>
  13. <script type="text/javascript">
  14. var counters = [];      // will hold all created timers (just to keep them ticking)
  15. function createNewTimer() {
  16.   var i = counters.length; // get length of counters array
  17.   counters[i] = { Seconds: 0, Stop: false }; // create object with properties Seconds & Stop (if true, do not call again and remove item)
  18.   var dv = document.createElement('div'); // create a new div element
  19.   dv.setAttribute('id', 'timer-' + i); // set the id so we can get it back later
  20.   dv.innerHTML = '<span id="timer-' +i + '-value">0</span><input type="button" value="stop timer" onclick="javascript:stopTimer(' + i + ');" />'; // create a label & button to stop this timer
  21.   var tmr = document.getElementById('timers'); // get timers div
  22.   tmr.appendChild(dv); // add div as timer element
  23.   setTimeout('tick(' + i + ');', 1000); // start a new timeout, calls item in 1 second (and does not run again, has to be recalled in tick event), give current index as parameter
  24. }
  25.  
  26. function tick(index) {
  27.   if (index < counters.length) { // does counter exist
  28.     if (!counters[index].Stop) { // does it request a stop?
  29.       counters[index].Seconds++; // increase seconds
  30.       var label = document.getElementById('timer-' + index + '-value'); // get span with value of timer
  31.       label.innerHTML = counters[index].Seconds; // update label
  32.       setTimeout('tick(' + index + ');', 1000); // restart the timeout, so that another second will be added after another second, give current index as parameter
  33.     }
  34.     else
  35.     {
  36.       // item requested to stop, so clean it up (delayed action, takes until the tick gets hit this time)
  37.       var el = document.getElementById('timer-' + index); // get div container timer elements
  38.       var tmr = document.getElementById('timers'); // get timers div
  39.       tmr.removeChild(el); // remove timer div from timers sheet
  40.     }
  41.   }
  42. }
  43.  
  44. function stopTimer(index) {
  45.   if (index < counters.length) { // does counter exist
  46.     counters[index].Stop = true; // set flag to stop true, next time the tick event gets hit for this index, the control will be removed
  47.   }
  48. }
  49. </script>
  50. </head>
  51. <body>
  52. <div id="timers" class="panel">
  53. <h1>Timers</h1>
  54. </div>
  55. <div id="commands" class="panel">
  56. <h1>Commands</h1>
  57. <input type="button" value="Start new timer" onclick="javascript:createNewTimer();" />
  58. </div>
  59. </body>
  60. </html>
Deze tekst werd het laatst bewerkt voor 94.96 % door thekid op zaterdag 5 januari 2013 om 12:04:46.
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #7 geschreven door fawkes op zondag 6 januari 2013 om 08:39:28.
fawkes' avatar
Multiviteit: 230
-
-
Ja dat denk ik wel. Maandag avond kan ik goed kijken, dan laat ik het je weten!
-
^ Reactie #8 geschreven door thekid op donderdag 10 januari 2013 om 15:42:10.
thekid's avatar
Multiviteit: 5273
Moderator
En fawkes, heb je meer nieuws :) versta je het via de laatste 2 sourcecodes?
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
  • Pagina
  • 1 van 1

Snel-antwoordformulier
Toon uitgebreid antwoordformulier Bericht nalezen Bericht plaatsen