We gaan een webpagina maken met een aftelklok in seconden tot het volgende nieuwe jaar.
Maak een HTML pagina met de volgende tekst:
Nog … seconden tot Nieuwjaar 2013
Vervang de puntjes door een span tag met een id.
Schrijf de Javascript code om in de span tag een afteller in seconden tot het nieuwe jaar weer te geven:
var nieuwjaardatum = new Date("2013"); maakt een datum object van de eerste seconde van het jaar 2013.
nieuwjaardatum.valueOf() berekent hoeveel milliseconden er liggen tussen nieuwjaardatum en 1 januari 1970 middernacht.
Zorg dat de afteller het aantal dagen, uren, minuten en seconden weergeeft (voorbeeld: Nog 100 dagen 6 uren 8 minuten 20 seconden tot Nieuwjaar 2013):
enkel de eenheden verschillend van nul mogen weergegeven worden
Vervang het jaartal door een tekstveld waarin de gebruiker zelf een jaartal mag invullen:
geef het tekstveld een standaard value (jaartal)
bij het aanpassen van het jaartal met de afteller automatisch aangepast worden
bij het opgeven van een jaartal in het verleden, moet een melding verschijnen en wordt het aftellen stil gelegd:
datum.getFullYear() geeft het jaartal van een datum object weer.
Deze opdracht toont hoe je met behulp van wiskunde vloeiende bewegingen kunt weergeven. Aangezien ik jullie de wiskunde wil besparen, gebruiken we de bestaande bibliotheek SmoothMovement.js.
Maak de webpagina timing/vloeiend.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vloeiende bewegingen</title> </head> <body> <span style="cursor:pointer;" id="knop">»</span> <div id="jaargetijden" style="overflow:hidden; width:0px; background-color:#000;"> <img src="lente.jpg" width="400" height="315" /><br /> <img src="zomer.jpg" width="400" height="315" /><br /> <img src="herfst.jpg" width="400" height="315" /><br /> <img src="winter.jpg" width="400" height="315" /> </div> </body> </html>
Voeg in de head tag het externe script SmoothMovement.js toe.
Zorg dat door het klikken op de span tag met het id knop de functie uitschuiven() wordt uitgevoerd.
De volgende JavaScript code zorgt voor het vloeiend openen van het paneel:
// globaal object met tijdstipberekeningen var uitschuifbeweging; // globaal object met het adres van het paneel var uitschuifelement; // klik functie function uitschuiven() { // opzoeken adres van het paneel uitschuifelement = document.getElementById('jaargetijden'); // object met beweging van punt 0 tot 400 aanmaken (hier de breedte van het paneel) uitschuifbeweging = new SmoothMovement(0, 400); // de beweging vloeiend animeren // 20 bepaalt de snelheid (< is sneller) // updateUitschuiven wordt uitgevoerd op de berekende tijdstippen // stopUitschuiven wordt uitgevoerd bij het beëindigen van de animatie uitschuifbeweging.animate(20, updateUitschuiven, stopUitschuiven); } function updateUitschuiven(frame){ // frame bevat de positie van de vloeiende beweging (hier tussen 0 en 800) uitschuifelement.style.width = frame + "px"; } function stopUitschuiven(){ // functie wordt uitgevoerd na het beëindigen van de vloeiende beweging document.getElementById("knop").innerHTML = "«"; }
Vul deze JavaScript code aan zodat het paneel bij een tweede klik op de knop gesloten wordt. M.a.w. De knop werkt als een aan/uit schakelaar.
Zorg dat bij het laden van de afbeeldingen de functie verklein(this) wordt uitgevoerd:
De originele afmetingen van de foto's kan je opvragen met adres.width en adres.height (adres bevat het adres van de img tag met de foto).
Voeg deze afmetingen met een underscore samen tot één tekenreeks en sla deze op in het id van de img tag van de foto (adres.id).
Verklein de breedte en hoogte van de foto's tot één vierde van de originele afmetingen.
Zorg dat bij het klikken op een verkleinde foto de functie zoom(this) wordt uitgevoerd:
Deze functie zorgt dat de originele afmetingen met een vloeiende overgang hersteld worden.
De originele afmetingen haal je uit het id van de foto.
Zorg dat klikken op een grote foto, de foto-afmetingen met een vloeiende beweging terug op één vierde van de originele afbeeldingen brengt. M.a.w. Zorg voor een aan/uit werking bij het klikken op een foto.
We maken van de vier jaargetijde foto's één overvloeiende foto.
Zorg dat de foto's naast elkaar worden weergegeven.
Voeg in de head tag het externe script Fader.js toe.
Maak van de div tag met de vier foto's een overvloeiende foto met de code:
var fader = new Fader('jaargetijden');
Activeer het automatisch overvloeien met de code:
fader.setInterval(5);
Bij het verkleinen van de foto's voeg je het adres van de foto's toe aan een array.
Pas de zoom functie aan zodat met een klik op om het even welke foto alle foto's aangepast worden.
Zoek zelf uit waarom het uitschuiven niet meer werkt.
Weergeven