[js] count down met start knop en klikteller

djwouter · 23 jul 2011

goedeavond !

ben vandaag maar eens in het wereldje van javascript gedoken we hadden een lolletje op de twitter over een swaffel app voor op de iphone ( webbased ) en ik ben er mee begonnen maar liep al tegen aardig wat problemen aan....

dit moet hij doen :

druk je op start moet de count down beginnen met aftellen... en mag de teller button geteld worden (hoevaak er op geklikt wordt) maar zodra de de tijd op is mag er niet meer geteld worden!

de code die ik heb :

HTML:

<html>
<head>






<script type="text/javascript">





// swaffel teller 



var numteller =0;

function numtimesclicked(){
	  
  numteller  = numteller +1;
  document.getElementById('numclicked').innerHTML = numteller;
}

</script>

<style>
input.counterbutton {
	height:300px;
	width:100%;
	background-color:#000000;
	color:#FFFFFF;
	font-size:50px;
} 
input.startgame {
	height:50px;
	width:100%;
	background-color:#000000;
	color:#FFFFFF;
	font-size:36px;
} 

</style>
</head>

<body>
<table width="100%" border="0" height="100%">
  <tr>
    <td height="50" colspan="3"><center>i-swaffel</center></td>
  </tr>
  <tr>
    <td width="77%"  height="50"><div id="notifier"></div><div id="gestard"></div></td>
    <td width="23%"><div id="countdown">0</div></td>
    <td width="23%"><div id="numclicked">
0
</div></td>
  </tr>
  <tr>
    <td colspan="3"><input type="button" onClick="numtimesclicked()" value="teller" class="counterbutton"></td>
    
  </tr>
  <tr>
    <td height="50" colspan="3"><input type="button" onClick="startgame(); return false" value="START" class="startgame"></td>
  </tr>
</table>
</body>
<script type="text/javascript">


 function display( notifier, str ) {
    document.getElementById(notifier).innerHTML = str;
  }
        
  function toMinuteAndSecond( x ) {
    return Math.floor(x/60) + ":" + x%60;
  }
        
  function setTimer( remain, actions ) {
    (function countdown() {
       display("countdown", toMinuteAndSecond(remain));         
       actions[remain] && actions[remain]();
       (remain -= 1) >= 0 && setTimeout(arguments.callee, 1000);
    })();
  }

  setTimer(20, {
    10: function () { display("notifier", "Just 10 seconds to go"); },
     5: function () { display("notifier", "5 seconds left");        },
     0: function () { display("notifier", "Time is up baby");       }
  });   


</script>
</html>

rajmv · 24 jul 2011

Interessante opbouw, maar wel ietwat cryptisch, van je onderste stuk javascript.
Ik heb het maar een klein beetje aangepast voor de leesbaarheid en onderhoudbaarheid..

Code:

<html>
<head>
	<script type="text/javascript">
	// swaffel teller 
	var numteller =0;
	var running = false;
	 
	function numtimesclicked(){
		if (running) {      
		  numteller  = numteller +1;
		  document.getElementById('numclicked').innerHTML = numteller;
		}
	}
	 
	</script>
	 
	<style>
	input.counterbutton {
	    height:300px;
	    width:100%;
	    background-color:#000000;
	    color:#FFFFFF;
	    font-size:50px;
	} 
	input.startgame {
	    height:50px;
	    width:100%;
	    background-color:#000000;
	    color:#FFFFFF;
	    font-size:36px;
	} 
	</style>
</head>

<body>
<table width="100%" border="0" height="100%">
  <tr>
    <td height="50" colspan="3"><center>i-swaffel</center></td>
  </tr>
  <tr>
    <td width="77%"  height="50"><div id="notifier"></div><div id="gestard"></div></td>
    <td width="23%"><div id="countdown">0</div></td>
    <td width="23%"><div id="numclicked">
0
</div></td>
  </tr>
  <tr>
    <td colspan="3"><input type="button" onClick="numtimesclicked()" value="teller" class="counterbutton"></td>
    
  </tr>
  <tr>
    <td height="50" colspan="3"><input type="button" onClick="startgame(); return false" value="START" class="startgame"></td>
  </tr>
</table>
</body>
<script type="text/javascript"><!--
  function display( notifier, str ) {
    document.getElementById(notifier).innerHTML = str;
  }
        
  function toMinuteAndSecond( x ) {
    return Math.floor(x/60) + ":" + x%60;
  }
        
  function setTimer( remain, actions ) {
    (function countdown() {
       display("countdown", toMinuteAndSecond(remain));         
       if (actions[remain]) actions[remain]();
		remain--;
		running = (remain >= 0);
       if (running) setTimeout(arguments.callee, 1000);
    })();
  }
 
	function startgame() { 
	  setTimer(20, {
	    10: function () { display("notifier", "Just 10 seconds to go"); },
	     5: function () { display("notifier", "5 seconds left");        },
	     0: function () { display("notifier", "Time is up baby");       }
	  });   
 	}
-->
</script>
</html>

[js] count down met start knop en klikteller

djwouter

Gebruiker

rajmv

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy